用卷轴反应本机2平面列表的水平和垂直两个视图问题

Question

我的屏幕上有两个平面图(将来可能会更多)，一个是水平模式，另一个是垂直模式。

但他们的位置与屏幕无关，似乎位置是绝对的。

​

​

我的代码：

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

你能试试这个吗。

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>
                
        
      );
    }

Answer 2

目前，您的视图，即包含FlatList的视图覆盖了整个屏幕，i.e.will被视为绝对。

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