FlatList 的 React-Native 布局格式

用户1790300

我正在尝试以并排卡片样式布局在屏幕上列出数据。简而言之,我试图模拟的是 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'
    }
});
帕特里克·R

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

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

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

React-native flatlist renderItem

来自分类Dev

React Native:FlatList 不呈现

来自分类Dev

React Native FlatList 不滚动

来自分类Dev

从React Native中的FlatList中删除项目

来自分类Dev

React Native中的Flatlist图像源

来自分类Dev

在BeginningReached上检测FlatList-React Native

来自分类Dev

React-Native FlatList产生SyntaxError

来自分类Dev

React Native Flatlist中的网格视图

来自分类Dev

无法删除React Native FlatList中的项目

来自分类Dev

React Native Flatlist多项选择未更新

来自分类Dev

React Native:FlatList keyExtractor 和 toString() 问题?

来自分类Dev

在 React Native 的 FlatList 中延迟加载项目?

来自分类Dev

React Native flatlist 特定数据

来自分类Dev

使用Redux时如何重新呈现FlatList React Native

来自分类Dev

FlatList在React Native中未显示任何内容

来自分类Dev

React Native Flatlist使用Redux在onEndReached上获得无限循环

来自分类Dev

将数组对象渲染到FlatList React Native中

来自分类Dev

React Native Flatlist-仅在可见时运行功能

来自分类Dev

React Native FlatList没有显示来自API的数据(axios)

来自分类Dev

React Native Flatlist-如何遍历嵌套对象

来自分类Dev

React Native-如何在FlatList属性上使用导航?

来自分类Dev

使用FlatList向下滚动标题并设置动画-React Native

来自分类Dev

onPress在React Native Flatlist中不起作用

来自分类Dev

如何在React Native中的Flatlist中获取行索引

来自分类Dev

React Native Flatlist仅渲染一行

来自分类Dev

React Native:如何在FlatList中播放视频

来自分类Dev

React-Native:使用FlatList ref的scrollToIndex时出现错误

来自分类Dev

在React Native中没有使用Flatlist呈现数据

来自分类Dev

Flatlist水平在React Native中没有粘性标题吗?

Related 相关文章

热门标签

归档