FlatList 的 React-Native 布局格式答案

【问题标题】：React-Native layout formatting for FlatListFlatList 的 React-Native 布局格式
【发布时间】：2017-12-20 23:40:14
【问题描述】：

我正在尝试以并排卡片样式布局在屏幕上列出数据。简而言之，我试图模拟的是 float:left 能力与 html 和 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'
    }
});

【问题讨论】：

标签： react-native react-native-flatlist

【解决方案1】：

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

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

【讨论】：