Question

我有此代码：

<View style={{flex:1}}>
  <ScrollView>
    <View style={{flex:0.25,elevation:2,marginVertical:5}}>
      <MoviesChild/>
    </View>
    <View style={{flex:0.75}}>
      <FlatList
        data={ListOfMovies}
        renderItem={this.renderData.bind(this)}
        keyExtractor={(x, i) => x.id}
        extraData={this.state}
      />
    </View>
  </ScrollView>
</View>

问题是，我的FlatList的数据出现了，但是我的子组件MoviesChild却消失了。 Flatlist可能与子组件重叠。有人可以找出我在哪里做错了吗？

Answer 1

您应该使用flexGrow：1为ScrollView赋予样式

Answer 2

尝试一下

<View style={{flex:1}}>
              <View style={{ flex:0.25,elevation:2,marginVertical:5 }}>
                <MoviesChild/>
              </View>
                <FlatList
                  style={{flex:0.75}}
                  data={ListOfMovies}
                  renderItem={this.renderData.bind(this)}
                  keyExtractor={(x, i) => x.id}
                  extraData={this.state}
                 />
</View>

Answer 3

我建议您不要在FlatList内使用ScrollView，因为FlatList滚动本身。因此，为了实现您的目标，请将第一个View包装在一个函数中，然后将其传递给ListHeaderComponent的{{1}}属性，如下所示：

FlatList

其中

<View style={{flex:1}}>
  <View style={{flex:0.75}}>
    <FlatList
        data={ListOfMovies}
        renderItem={this.renderData.bind(this)}
        keyExtractor={(x, i) => x.id}
        extraData={this.state}
        ListHeaderContainer={this.renderHeader}
        />
  </View>
</View>

我希望这可以解决您的问题！您可以在官方doc

上找到我在说什么

React Native ScrollView消失了子组件

3 个答案: