React Native Elements TabView 内嵌FlatList无法滚动问题咨询

你可以按照以下步骤修改代码解决滚动异常问题：

• 给最外层TabView添加flex:1样式，确保标签页组件占满父容器可用高度
• 给TabView.Item补充flex:1属性，当前仅设置了宽度无高度约束，会导致Item高度直接被内容撑满，FlatList没有固定可视窗口所以无法触发滚动
• 移除FlatList外层的ScrollView组件，两个滚动组件嵌套会触发手势冲突，反而会阻断滚动逻辑
• 给FlatList添加flex:1样式，确保它占满TabView.Item内除标题外的剩余高度

修改后的参考代码如下：

<TabView 
  style={{flex: 1}}
  value={this.state.index} 
  onChange={this.handleChange}
>
  <TabView.Item style={{width: deviceWidth, flex: 1}}>
    <View style={{flex: 1}}>
      <Text style={styles.text}> Blockchain News </Text>
      <FlatList
        style={[styles.bgColor, {flex: 1}]}
        data={this.state.articles}
        renderItem={({item}) => <DataItem article={item} />}
        keyExtractor={item => item.url}
        refreshing={this.state.refreshing}
        onRefresh={this.handleRefresh.bind(this)}
      />
    </View>
  </TabView.Item>
</TabView>

如果修改后仍有问题，可以检查TabView的父容器是否也设置了flex:1，确认没有外层元素限制了标签页的整体高度。

内容的提问来源于stack exchange，提问作者Frank Boccia