FlatList 的 React-Native 布局格式

Question

我正在尝试以并排卡片式布局在屏幕上列出数据。简而言之，我试图模拟的是 float: left abilities with html and css。每行包含两张卡片，它们只是格式化的视图标签。出于某种原因，它们似乎一直以单列方式显示在屏幕左对齐的位置。我的样式表做错了什么导致出现此垂直对齐问题？

screen.js:
<View style={{flexDirection: 'row', backgroundColor: '#ffffff'}}>
<StatusBar translucent={false} barStyle="default" />
    <FlatList
data={myList}
renderItem={({ item }) => (
    <View style={style.outerContainer}>
        <Image source={require('../../../../images/NoImageAvailable.png')} style={style.profileUrl} />
        <TouchableHighlight onPress={onPress}>
            <View style={style.textContainer}>
                <Text style={style.mainHeading}>{item.name}</Text>
            </View>
        </TouchableHighlight>
    </View>
)}
/>
</View>



style.js:
export default EStyleSheet.create({
    outerContainer: {
        width: 150,
        alignItems: 'center',
        justifyContent: 'center',
        marginLeft: 5,
        marginRight: 5,
        marginTop: 20,
        borderWidth: 3,
        borderColor: '#e9e9e9',
        borderBottomLeftRadius: 10,
        borderBottomRightRadius: 10,
        borderTopLeftRadius: 10,
        borderTopRightRadius: 10
    },
    profileUrl: {
        width: 120,
        height: 120,
        marginLeft: 10,
        marginRight: 10,
        marginTop: 10,
        resizeMode: 'contain'
    },
    textContainer: {
        width: 120,
        height: 75,
        alignItems: 'center',
        justifyContent: 'center',
        marginLeft: 10,
        marginRight: 10,
        marginTop: 10,
        marginBottom: 10,
        paddingLeft: 10,
        paddingRight: 10,
        paddingTop: 10,
        paddingBottom: 10,
        backgroundColor: '#f8f8f8',
        borderWidth: 3,
        borderColor: '#e9e9e9',
        borderBottomLeftRadius: 10,
        borderBottomRightRadius: 10,
        borderTopLeftRadius: 10,
        borderTopRightRadius: 10
    },
    mainHeading: {
        fontSize: 16,
        fontFamily: 'Arial',
        fontWeight: '600'
    },
    bodyText: {
        fontSize: 14,
        fontFamily: 'Arial'
    }
});

Answer 1

据我了解，您正在尝试并排设置平面列表的两个项目，如果是这样，您是否尝试过将 numColumns={2} 设置为平面列表？

或者，如果您正在谈论图像和文本，请尝试将 flexDirection 设置为您的 outerContainer。

FlatList 的 React-Native 布局格式

React-Native layout formatting for FlatList

react-native

react-native-flatlist