React Native TvOS：如何通过代码切换TabBarIOS标签页

问题场景 #

我在TabBarIOS中设置了“Now Playing”和“Animations”两个标签页，代码如下：

const TvApp = () => {
  const nowPlaying = useRef();

  return (
    <TabBarIOS showHideTransition={true}>
      <Item
        title="Now Playing"
        ref={nowPlaying}>
        <View>
          <Clock />
          <Video loopable={loopable} />
        </View>
      </Item>
      <Item title="Animations" showHideTransition={true}>
        <Animations setLoopable={setLoopable} nowPlaying={nowPlaying} />
      </Item>
    </TabBarIOS>
  );
};

在“Animations”页面的<Animations/>组件中，希望点击元素时跳转到“Now Playing”标签页，但通过ref模拟点击的方式找不到对应方法：

const Animations = ({nowPlaying}) => {
  const goToNowPlaying = () => {
    // 如何在此处实现跳转？
  }

  return (
    <ScrollView>
      {Object.values(images).map(image => (
        <View style={styles.tile} key={image}>
          <TouchableOpacity
            onPress={goToNowPlaying}>
          </TouchableOpacity>
        </View>
      ))}
    </ScrollView>
  );
};

解决方案 #

使用TabBarIOS的selectedTab状态控制来实现跳转，这是官方推荐的标准方式，比ref模拟点击更可靠：

1. 父组件（TvApp）修改 #

添加状态跟踪选中标签，并绑定到TabBarIOS的selectedTab属性，同时将状态更新方法传递给Animations组件：

import { useState } from 'react';

const TvApp = () => {
  // 定义状态跟踪选中的标签，初始选中"Now Playing"
  const [selectedTab, setSelectedTab] = useState('nowPlaying');

  return (
    <TabBarIOS 
      showHideTransition={true}
      selectedTab={selectedTab} // 绑定选中状态
    >
      <Item
        title="Now Playing"
        tabBarItemID="nowPlaying" // 给标签设置唯一ID
      >
        <View>
          <Clock />
          <Video loopable={loopable} />
        </View>
      </Item>
      <Item 
        title="Animations" 
        showHideTransition={true}
        tabBarItemID="animations" // 设置唯一ID
      >
        {/* 传递状态更新方法给Animations组件 */}
        <Animations setLoopable={setLoopable} setSelectedTab={setSelectedTab} />
      </Item>
    </TabBarIOS>
  );
};

2. 子组件（Animations）修改 #

调用传递过来的setSelectedTab方法切换到目标标签：

const Animations = ({setLoopable, setSelectedTab}) => {
  const goToNowPlaying = () => {
    // 切换到"Now Playing"标签
    setSelectedTab('nowPlaying');
  }

  return (
    <ScrollView>
      {Object.values(images).map(image => (
        <View style={styles.tile} key={image}>
          <TouchableOpacity onPress={goToNowPlaying}>
            {/* 这里可以添加图片或其他内容 */}
          </TouchableOpacity>
        </View>
      ))}
    </ScrollView>
  );
};

说明 #

• TabBarIOS的selectedTab属性接收标签的tabBarItemID（或title，如果没有设置ID的话），通过更新这个状态就能实现标签切换
• 不建议用ref模拟点击：因为TabBarIOS.Item的内部实现没有暴露点击方法，这种方式依赖组件内部细节，容易在版本更新时失效

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