reactjs - 将道具传递给嵌套的 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 为真时才会被渲染。

第二个问题是：我如何将班级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,
             },
         })
}