代码之家  ›  专栏  ›  技术社区  ›  user1790300

反应平面列表的本机布局格式

  •  0
  • user1790300  · 技术社区  · 7 年前

    我试图以并排卡片式布局在屏幕上列出数据。简言之,我试图用html和css模拟的是float:left功能。其中每行包含两张卡,它们只是格式化的视图标记。出于某种原因,它们似乎以单列方式显示在屏幕下方,而不是左对齐。我的样式表有什么错,导致出现这种垂直对齐问题?

    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'
        }
    });
    
    1 回复  |  直到 7 年前
        1
  •  2
  •   Patrick R    7 年前

    据我所知,您正在尝试并排设置两个平面列表项如果是,您是否尝试过设置 numColumns={2} 到您的单一列表?

    或者,如果您正在谈论图像和文本,请尝试设置 flexDirection 到您的外部容器。