如何在RNRF的ScrollableTabBar中获取子Scene的name属性

先看你给出的代码：

<Scene tabs={true} tabBarComponent={()=> <ScrollableTabBar items={["Approval", "My Request", " DO Customer", "My Confirm", "View Request"]}/>} tabBarPosition='top' lazy={true}> 
  <Scene key="Home" hideNavBar component={Home} title={"Home"} name='Home'/> 
</Scene>

你提到尝试this.props.children返回undefined，这很正常——RNRF的自定义tabBarComponent并不会自动把父Scene的子元素传递进去，得换几种方式来获取子Scene的name属性：

方法一：统一维护场景配置，同步传递 #

最稳妥的方式是把所有tab对应的子Scene配置抽成一个数组，这样既能生成子Scene，又能把name同步传给ScrollableTabBar：

// 先定义所有tab场景的配置
const tabSceneConfigs = [
  { key: "Home", name: "Home", component: Home, title: "Home" },
  { key: "Approval", name: "Approval", component: Approval, title: "Approval" },
  { key: "MyRequest", name: "My Request", component: MyRequest, title: "My Request" },
  // 剩下的tab配置...
];

// 然后在父Scene中使用
<Scene 
  tabs={true} 
  tabBarComponent={() => (
    <ScrollableTabBar items={tabSceneConfigs.map(config => config.name)} />
  )} 
  tabBarPosition='top' 
  lazy={true}
>
  {tabSceneConfigs.map(config => (
    <Scene 
      key={config.key} 
      hideNavBar 
      component={config.component} 
      title={config.title} 
      name={config.name}
    />
  ))}
</Scene>

这样ScrollableTabBar的items直接就是子Scene的name数组，完全同步，不会出现不一致的问题。

方法二：通过tabBarProps手动传递 #

如果不想抽离配置，也可以用RNRF提供的tabBarProps属性，把需要的name列表传给ScrollableTabBar：

<Scene 
  tabs={true} 
  tabBarComponent={(props) => <ScrollableTabBar {...props} />} 
  tabBarPosition='top' 
  lazy={true}
  // 把所有子Scene的name传给tab组件
  tabBarProps={{
    sceneNames: ["Home", "Approval", "My Request", "DO Customer", "My Confirm", "View Request"]
  }}
>
  <Scene key="Home" hideNavBar component={Home} title={"Home"} name='Home'/>
  {/* 其他子Scene */}
</Scene>

之后在ScrollableTabBar组件里，直接通过this.props.sceneNames就能拿到所有子Scene的name了。

方法三：利用RNRF的router API获取（需注意版本兼容性） #

如果你不想手动维护列表，可以尝试通过RNRF的内部router对象获取当前父场景的子场景信息：

class ScrollableTabBar extends Component {
  componentDidMount() {
    // 获取当前的父场景
    const parentScene = this.props.router.getCurrentScene();
    // 从父场景中提取子Scene的name
    const sceneNames = parentScene.children.map(scene => scene.name);
    console.log('子Scene的name列表：', sceneNames);
    // 你可以把这个列表存到组件状态里，用来渲染tab栏
    this.setState({ sceneNames });
  }

  render() {
    const { sceneNames } = this.state;
    return (
      // 这里用sceneNames来渲染你的滚动tab栏
      <View>
        {sceneNames?.map(name => (
          <Text key={name}>{name}</Text>
        ))}
      </View>
    );
  }
}

不过要注意，这种方式依赖RNRF的内部实现，不同版本可能有差异，所以优先推荐前两种方法。

再补充下为什么this.props.children会是undefined：你是直接在tabBarComponent的回调里返回了ScrollableTabBar，RNRF并没有把父Scene的子元素作为props传递给这个自定义tab组件，所以自然拿不到children。

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