flatlist的反应本地布局格式

Question

我正在尝试在屏幕上与附带卡样式布局列出屏幕上的数据。简而言之，我试图模拟的是浮点：带有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'
    }
});

Answer 1

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

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