React Native获取选中日期Tab的数值/索引及回调异常问题求助

首先，你遇到的问题核心是没有正确匹配Tabs组件（看起来是react-native-scrollable-tab-view）的onChangeTab回调参数结构，同时初始切换时的参数接收逻辑有误。

问题原因分析 #

react-native-scrollable-tab-view的onChangeTab回调并不会直接传递Tab和index两个独立参数，而是传递一个包含索引和Tab引用的对象。你原来的写法onChangeTab={(Tab, index) => this.tabChanged(Tab, index)}会把整个对象作为第一个参数Tab，第二个参数index自然就是undefined，所以alert(Tab)会显示[object Object]。

具体修复步骤 #

1. 修正tabChanged函数的参数接收

把函数的参数改成接收一个对象，从中解构出索引（i，这是该组件回调里的标准索引字段）和Tab引用，然后通过索引从你的dateList数据源中获取对应的日期值：

tabChanged({ i, ref }) {
  // 通过索引i获取选中的日期数据
  const selectedTabData = this.state.dateList[i];
  const selectedDate = selectedTabData.items; // 对应你Tab heading的数值

  // 弹窗显示正确的日期和索引
  alert(`选中日期：${selectedDate}，索引：${i}`);

  // 保存选中的日期/索引到state（按需使用）
  this.setState({
    selectedDate: selectedDate,
    selectedTabIndex: i
  });
}

2. 调整Tabs组件的onChangeTab回调调用

直接传递回调对象给tabChanged函数即可：

<Tabs 
  renderTabBar={() => <ScrollableTab />} 
  style={styles.Card_background_Margin} 
  initialPage={0} 
  onChangeTab={(tabObj) => this.tabChanged(tabObj)}
>
  {this.state.dateList.map((lists) => (
    // 记得给Tab添加唯一key，避免React警告
    <Tab 
      heading={lists.items} 
      style={styles.Tab_background}
      key={lists.items}
    >
      <ScheduleDays navigation={this.props.navigation} />
    </Tab>
  ))}
</Tabs>

3. 处理初始选中的Tab（可选）

因为initialPage={0}，组件初始化时不会触发onChangeTab，如果需要一开始就保存初始选中的日期，可以在组件挂载时设置：

componentDidMount() {
  if (this.state.dateList.length > 0) {
    const initialDate = this.state.dateList[0].items;
    this.setState({
      selectedDate: initialDate,
      selectedTabIndex: 0
    });
  }
}

为什么之前切换其他Tab看似正常？ #

其实之前的逻辑一直是错误的，只是你可能误以为切换时“正常”，实际上是alert输出了对象的字符串形式，而你没有注意到参数结构的问题。修正后就能稳定获取到正确的索引和日期值了。

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