React Native：Android端ScrollableTabView initialPage设置不生效问题

可能原因 #

• 组件版本Bug：react-native-scrollable-tab-view 1.0.0版本在Android端对initialPage属性的处理存在兼容性缺陷，部分Android相关逻辑未完善。
• 初始化时机差异：Android与iOS组件渲染、数据初始化时机不同，getInitialPage()返回的索引可能在组件初始化时未完成计算，导致Android端无法正确获取。
• 代码逻辑疏漏：你的getInitialPage()函数存在变量名错误（theDataFaq、dataFaqEnable未定义），且遍历匹配逻辑冗余，可能导致索引计算错误。

修复方案 #

1. 修正索引计算逻辑 #

先修复getInitialPage()中的变量和逻辑问题，确保索引计算准确：

getInitialPage() {
  const routesData = this.props.data;        
  const somethingData = this.props?.something || [];
  let indexSomething = 0;

  if (somethingData.length > 0) {
    // 筛选启用的项
    const dataEnable = somethingData.filter(item => item.enable);
    if (dataEnable.length > 0) {
      // 查找匹配项的索引
      const matchedIndex = dataEnable.findIndex(item => routesData === item.something);
      indexSomething = matchedIndex !== -1 ? matchedIndex : 0;
    }
  }
  return indexSomething;
}

2. 手动触发Android端初始页面跳转 #

若修正逻辑后仍无效，通过ref在组件挂载后手动设置初始页面：

componentDidMount() {
  if (Platform.OS === 'android') {
    this.tabViewRef?.goToPage(this.getInitialPage());
  }
}

// 在ScrollableTabView中添加ref属性
<ScrollableTabView
  ref={ref => this.tabViewRef = ref}
  tabBarActiveTextColor={Colors.POLYCHROME_15}
  initialPage={this.getInitialPage()}
  tabBarUnderlineStyle={[Styles.tabBarBorder]}
  locked={true}
  style={Styles.tabBarContainer}
>
  {/* 你的子标签页组件 */}
</ScrollableTabView>

3. 升级组件版本 #

如果以上方法都无法解决问题，建议升级react-native-scrollable-tab-view到最新稳定版本，新版本大概率修复了Android端initialPage的兼容问题。

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