react-native：具有动态 numColumns 的平面列表取决于 json 参数

Question

这是我的 json:

{
   data:[
      {id:1,type:0...},{id:2,type:0...},{id:3,type:1...},
   ]
}

和平面列表

_keyExtractor = (item,index) => item.id.toString();

<FlatList
   data={this.state.products}
   renderItem={this.renderItem}
   keyExtractor={this._keyExtractor}
   numColumns={3}
/>

我想要这样的东西：

 numColumns={item.type ? 1 : 2}

可能吗？

Answer 1

不幸的是，numColumns 设置了全局 FlatList 的列数，但可以在 renderItem 函数中创建类似的行为。

当然，您可能必须事先修改数据结构，以便此解决方法适用于您。

参见下面的示例：

数据：

  this.state={
            data:[
      {id:1,type:0},{id:2,type:1},{id:3,type:1},
      {id:4,type:0},{id:5,type:1},{id:6,type:0},
   ]
        }

渲染：

const WIDTH = Dimensions.get('window').width; // get the screen width 

renderItem({item}){
    // if type == 0, render two views side by side
    if (item.type == 0){
        return(
            <View style={{width: WIDTH, flexDirection: 'row'}}>
                <View style={{ backgroundColor: 'red', width: WIDTH/2 }}>
                    <Text> {item.id} a) </Text>
                </View>
                <View style={{ backgroundColor: 'blue', width: WIDTH/2 }}>
                    <Text> {item.id} b) </Text>
                </View>
            </View>
        );
    }else{
        // otherwise render only one item 
        return (
            <View style={{ backgroundColor: 'green', width: WIDTH }}>
                <Text> {item.id} </Text>
            </View>
        );
    } 
}
render() {
    return (
        <SafeAreaView style={styles.container}>
            <FlatList
            data={this.state.data}
            keyExtractor={(item) => item.id.toString()}
            renderItem={(item) => this.renderItem(item)}
            />
        </SafeAreaView>
    );
}

图片：

react-native：具有动态 numColumns 的平面列表取决于 json 参数

react-native: flatlist with dynamic numColumns depending json params

react-native

react-native-flatlist