FlatList виден только если есть хотя бы 2 элемента - PullRequest
Новая
       59

FlatList виден только если есть хотя бы 2 элемента

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

В моем приложении Expo я создал плоский список, который получает информацию от символов. Значение символов просто жестко задано, как показано ниже 

constructor(props) {
        super(props)
        this.state = {
            symbols: [{"symbol": "1816ABC","Name": "Some data","icon": "md-star-outline"}],
        }
    }

Вот моя функция рендеринга 

render() {
        if (!this.state.fontLoaded) {
            return <Expo.AppLoading />;
          }
        return (
            <View style={styles.mainContainer}>
                <View style={{paddingVertical: padding.med,alignItems: 'center'}}>
                    <Text style={styles.headerText}>
                        ALERTS
                    </Text>
                </View>

                <FlatList
                    data={this.state.symbols}
                    extraData={this.state.symbols}
                    keyExtractor={(item, index) => item.symbol}
                    ItemSeparatorComponent={this.renderListSeparator}
                    renderItem={this.renderListItem}
                    onRefresh={() => this.onPullToRefresh()}
                    refreshing={this.state.isFetching}
                />
            </View>
        );
    }

Когда символы имеют только 1 элемент, список не отображается и на экране ничего нет, просто появляется слово ALERTS

Когда я жестко кодирую еще несколько элементов в списке symbols, отображаются всеиз пунктов нет проблем.

Не уверен, если это проблема с моим кодом или компонентом FlatList

РЕДАКТИРОВАТЬ 

renderListItem = ({ item, index }) => {
        return (
            <TouchableOpacity
                onPress={() => this.onPressListItem(index)}
            >
                <MyListItem
                    item={item}
                />
            </TouchableOpacity>
        )
    }

РЕДАКТИРОВАТЬ 2

Живой код доступен здесь https://snack.expo.io/@zoonosis/ranting-pudding

Ответы [ 2 ]

1 голос
/ 10 апреля 2019

Это ответ на эту проблему, предоставленный breadboxio на выставочных форумах

"Итак, я посмотрел на ваш код, и ваш элемент визуализируется, просто без ширины, поэтому вы не можете его увидеть. Добавив width: sizes.fullWidth к вашему верхнему уровню. Просмотр на MyListItem исправляет этот вопрос. "

"ваш разделительный элемент имеет ширину. Для одного элемента разделительный элемент не отображается, но для более чем одного существует. Таким образом, после отображения разделительного элемента плоский список растягивается до ширины этот разделитель. "

1 голос
/ 08 апреля 2019 
render() {    console.log(this.state.symbols)
        return (
           <FlatList
                    data={this.state.symbols}
                    extraData={this.state.symbols}
                    keyExtractor={(item, index) => item.symbol}
                    ItemSeparatorComponent={this.renderListSeparator}
                    renderItem={(value,index)=>{
                      return(
                        console.log(value.item.symbol,'hel')
                      )
                    }}

                />

        );
    }
...