Android端ScrollableTabView嵌套ScrollView更新版本后仍无法显示求助

我之前也碰到过一模一样的情况，在React Native 0.44.3 + react-native-cli 2.0.1的环境下，哪怕把ScrollableTabView更到0.8.0版本，只要嵌套在外层ScrollView里，Android端就完全看不到内容。结合你的代码场景，给你几个实用的解决办法：

办法一：给ScrollableTabView设置明确高度 #

Android平台对嵌套滚动容器的高度计算特别严格，外层ScrollView是自适应高度的，内部的ScrollableTabView如果没有明确的高度约束，系统根本不知道该给它分配多少空间，自然就把内容藏起来了。你可以通过屏幕高度减去头部、Tab栏的实际高度来动态设置：

import { Dimensions } from 'react-native';
const { height: screenHeight } = Dimensions.get('window');

// 你的render方法修改后
render() {
  return (
    <ScrollView>
      {this._renderUser()}
      <ScrollableTabView
        tabBarActiveTextColor="red"
        tabBarUnderlineStyle={{ backgroundColor: 'red' }}
        initialPage={0}
        renderTabBar={() => <DefaultTabBar textStyle={Styles.tabText} />}
        // 这里的150根据你实际的头部导航栏、用户信息栏总高度调整
        style={{ height: screenHeight - 150 }}
      >
        <ScrollView tabLabel="线索" style={{ flex: 1 }}>
          {/* 你的页面内容 */}
        </ScrollView>
        {/* 其他Tab页面 */}
      </ScrollableTabView>
    </ScrollView>
  );
}

办法二：用FlatList替代外层ScrollView #

FlatList的布局计算逻辑比ScrollView更友好，你可以把顶部的用户信息作为列表头部，把ScrollableTabView作为列表项，从根源上避免嵌套ScrollView的高度冲突：

render() {
  return (
    <FlatList
      // 将用户信息部分设为列表头部
      ListHeaderComponent={this._renderUser()}
      data={[{}]}
      renderItem={() => (
        <ScrollableTabView
          tabBarActiveTextColor="red"
          tabBarUnderlineStyle={{ backgroundColor: 'red' }}
          initialPage={0}
          renderTabBar={() => <DefaultTabBar textStyle={Styles.tabText} />}
          style={{ flex: 1 }}
        >
          <ScrollView tabLabel="线索" style={{ flex: 1 }}>
            {/* 你的页面内容 */}
          </ScrollView>
        </ScrollableTabView>
      )}
      keyExtractor={(item, index) => index.toString()}
    />
  );
}

额外小提示 #

• 记得给每个Tab里的ScrollView加上flex:1，确保内容能撑开容器；
• 如果你的业务场景允许，直接去掉外层ScrollView，让ScrollableTabView占据剩余屏幕空间，这是最省心的解决方式。

内容的提问来源于stack exchange，提问作者Tran Van Thang