在滚动问题中反应本地2平面列表水平和垂直

Question

我的屏幕上有2个平面列表（将来可能会更多），一个是水平模式，另一个是垂直模式

但它们在屏幕上的位置不重复，似乎位置绝对

我的代码：

render() {
      return (
       <View>
            <View>
                <FlatList
                    data={this.state.topData}
                    renderItem={({ item }) => <ItemSample item={item} />}
                    horizontal={true}
                    keyExtractor={item => item.slug}
                    refreshing={this.state.topLoading}
                    onRefresh={this.handleRefresh.bind(this)}
                />
            </View>

            <View>
                <FlatList
                    data={this.state.lastData}
                    renderItem={({ item }) => <ItemSample item={item} />}
                    horizontal={false}
                    numColumns={2}
                    keyExtractor={item => item.slug}
                    refreshing={this.state.lastLoading}
                    onRefresh={this.handleRefresh.bind(this)}
                />
            </View>
        </View>
                
        
      );
    }

Answer 1

当前，您的包含 FlatList 的视图覆盖了整个屏幕，即将被视为绝对。

如果您不希望它是绝对的，则应在 ScrollView 中添加这些视图。

Answer 2

你能试试这个吗？

render() {
      return (
    <ScrollView>
       <View style={{flex:1}}>
           
                <FlatList
                    data={this.state.topData}
                    renderItem={({ item }) => <ItemSample item={item} />}
                    horizontal={true}
                    keyExtractor={item => item.slug}
                    refreshing={this.state.topLoading}
                    onRefresh={this.handleRefresh.bind(this)}
                    horizontal
                />
          

            <View style={{flex:1}}>
                <FlatList
                    data={this.state.lastData}
                    renderItem={({ item }) => <ItemSample item={item} />}
                    horizontal={false}
                    numColumns={2}
                    keyExtractor={item => item.slug}
                    refreshing={this.state.lastLoading}
                    onRefresh={this.handleRefresh.bind(this)}
                />
            </View>
        </View>
      <ScrollView>
                
        
      );
    }