将道具传递给嵌套的 Tabnavigator

Question

我现在使用 react native 已经 3 个月了，我现在已经有几天这个问题没有任何解决方案。

问题： 我在 StackNavigator 中有一个嵌套的 TabNavigator。这两个导航器都在一个无状态组件中：

const MyStackNav = StackNavigator({
  Tabs:{
    screen: TabNavigator({
        Tab1: { screen: TabScreen1},
        Tab2: { screen: TabScreen2},
        Tab3: { screen: TabScreen3},
        ...(CONDITION ? { Tab4: {
          screen: TabScreen4
        }} : {})
      })
    }
  StackScreen1:{
    screen: StackScreenOne,
  },
  StackScreen2:{
    screen: StackScreenTwo,
  },
})

组件的调用：

class MainApp extends React.Component {

  constructor(props)
  {
    super(props);

    this.state = {
      condition: false,
    };
  }

  render() {
    return (
      <MyStackNav/>
    );
  }
}

如何将我的类MainApp 中的条件传递给MyNavStack 组件内的条件变量以进行条件渲染？ 所以 Tab4 只有在 CONDITION 为 true 时才会被渲染。

第二个问题是： 例如，如何将班级 MainApp 中的道具传递到第一个选项卡屏幕？

提前致谢！

Answer 1

你可以给你MyStackNav这样的属性：<MyStackNav condition={this.state.condition} />

在MyStackNav 你可以说：

const MyStackNav = props => StackNavigator({
  Tabs:{
    screen: TabNavigator({
        Tab1: { screen: TabScreen1},
        Tab2: { screen: TabScreen2},
        Tab3: { screen: TabScreen3},
        ...(props.condition? { Tab4: {
          screen: TabScreen4
        }} : {})
      })
    }
  StackScreen1:{
    screen: StackScreenOne,
  },
  StackScreen2:{
    screen: StackScreenTwo,
  },
})

您无需创建React.component 来传递道具。

如果你想在你的组件中做更多的事情，你也可以稍微扩展一下：

 const MyStackNav = (props) => {
         const { condition } = props;
         return StackNavigator({
             Tabs: {
                 screen: TabNavigator({
                     Tab1: {
                         screen: TabScreen1
                     },
                     Tab2: {
                         screen: TabScreen2
                     },
                     Tab3: {
                         screen: TabScreen3
                     },
                     ...(condition ? {
                         Tab4: {
                             screen: TabScreen4
                         }
                     } : {})
                 })
             }
             StackScreen1: {
                 screen: StackScreenOne,
             },
             StackScreen2: {
                 screen: StackScreenTwo,
             },
         })
}