flatlist 将来自 json api 的数据呈现为每行 3 个项目答案

【问题标题】：flatlist rendering data from json api as 3 items per rowflatlist 将来自 json api 的数据呈现为每行 3 个项目
【发布时间】：2018-08-22 10:12:16
【问题描述】：

大家好，我正在从 json api 获取数据，并且我正在使用 flatlist 来呈现项目。我正在使用numColumns 属性每行显示 3 个项目但假设我有 7 或 8 件物品我在渲染时遇到问题。我想要显示的布局是这样的

X X X
X X X
X X

但我得到的是： layout

这是我的代码：

    _renderItem = ({ item, index }) => (
            <View style={categorystyles.Category} key={index}>
                <TouchableOpacity activeOpacity={.5}
                    onPress={() => this.props.navigation.navigate('ListingPerCategory', { catid: item.id })}>
                    {item.category_app_icon ? <Image style={categorystyles.CategoryImg}
                        source={{ uri: `${item.category_app_icon}` }} /> :
                        <Image style={categorystyles.CategoryImg}
                            source={require('../assets/coffeecup.png')} />}
                </TouchableOpacity>
                <Text style={{ marginTop: 5 }}>{escape(item.name).replace('%20', ' ').replace('%26amp%3B%20', ' ')}</Text>
            </View>
        )
   render(){
     return(
        <FlatList
        horizontal={false}
        data={this.state.categories}
        keyExtractor={(item, index) => item.id}
        numColumns={3}
        renderItem={this._renderItem}
    />
     )
   }

    const styles = StyleSheet.create({
       Category: {
            flex:1,
            justifyContent: 'center',
            alignItems:'center',    
            margin:5
        },
        CategoryImg: {
            resizeMode: 'contain',
            width: 50,
            height: 50
        }
    })

【问题讨论】：

由于 justifyContent 或 alignItems center 。将它们一个一个删除并检查。问题应该得到解决。如果不告诉我

标签： react-native react-native-flatlist

【解决方案1】：

由于您使用的是 flex: 1 和 alignItems: center ，因此您的布局将如下所示

因此，其中的items 将根据layout 项垂直和水平居中对齐。

相反，您需要检查设备的width 并在此基础上添加布局。

你的风格

Category: {
  flex:1,
  maxWidth: Dimensions.get('window').width / 3 - 10, // Width / 3 - (marginLeft and marginRight for the components)
  justifyContent: 'center',
  alignItems:'center',    
  margin:5
},

添加这个样式后，layout会是这个样子

【讨论】：

【解决方案2】：

如果你想这样显示

X X X
X X X
X X

不是

X X X
X X X
 X X

只需改变样式：

   const styles = StyleSheet.create({
   Category: {
        flex:1,
        justifyContent: 'flex-start',
        alignItems:'center',    
        margin:5
    },
    CategoryImg: {
        resizeMode: 'contain',
        width: 50,
        height: 50
    }
})

【讨论】：

【解决方案3】：

Flatlist 延迟加载项目 - 这意味着它们会在您滚动时呈现。这是由于性能而导致的平面列表的行为。如果你有兴趣一起渲染，你应该使用 ScrollView 来代替

【讨论】：