FlatList覆盖数据React Native

Question

我使用flatlist从服务中呈现数据，但它总是覆盖列表，但如果我尝试显示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}
/>

Error output image

如果我添加numColumns = {2}，那么它将显示实际结果

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

Output image with column 2

Answer 1

NativeBase Content组件是React Native ScrollView的包装器。为避免这种情况，请将内容替换为View。