Reaction-native: плоский список с динамическими столбцами numColumns в зависимости от параметров json - PullRequest
Новая
       2

Reaction-native: плоский список с динамическими столбцами numColumns в зависимости от параметров json

0 голосов
/ 20 апреля 2019

Это мой 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}

Возможно ли это?

1 Ответ

2 голосов
/ 20 апреля 2019

К сожалению, 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>
    );
}

Изображение:

Image example

...