FlatList перезаписывает данные React Native

Я использую плоский список для рендеринга данных из службы, но он всегда перезаписывает список, но если я пытаюсь отобразить 2 столбца, он работает нормально

Код:-

makeRemoteRequest = () => {
        const { page, seed } = this.state;
        const url = `https://randomuser.me/api/?seed=${seed}&page=${page}&results=50`;
        this.setState({ loading: true });
        fetch(url)
          .then(res => res.json())
          .then(res => {
            this.setState({
              data: page === 1 ? res.results : [...this.state.data, ...res.results],
              error: res.error || null,
              loading: false,
              refreshing: false
            });
          })
          .catch(error => {
            this.setState({ error, loading: false });
          });
};

renderItems = (item) =>  {
        return (<Content>
                  <Text>{item.item.email}</Text>
                </Content>
        );
 }

<FlatList
   data={this.state.data}
   renderItem={this.renderItems}
   keyExtractor={item => item.email}
/>

Ошибка выходного изображения

Если я добавлю numColumns = {2}, он покажет фактический результат

<FlatList
    numColumns={2}
    data={this.state.data}
    renderItem={this.renderItems}
    keyExtractor={item => item.email}
/>

Выходное изображение со столбцом 2


person Aneh Thakur    schedule 18.03.2018    source источник
comment
Измените <Content> на <View> и проверьте   -  person Anjal Saneen    schedule 18.03.2018


Ответы (1)


Компонент NativeBase Content является оболочкой React Native ScrollView. Чтобы этого избежать, замените Content на View.

person Anjal Saneen    schedule 18.03.2018