Question

我正在尝试以并排卡片样式布局在屏幕上列出数据。简而言之，我试图模拟浮动：左边的能力与html和CSS。每行包含两张卡片，这些卡片只是格式化的View标签。出于某种原因，它们似乎以单列方式显示在屏幕左侧，而不是左对齐。我的样式表出了什么问题才能解决垂直对齐问题？

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设置为您的外部容器。

FlatList的React-Native布局格式

1 个答案: