Question

我正在使用本地反应3个月，现在我有这个问题好几天没有任何解决方案。

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

Intent i = new Intent(context, DemoActivity.class);
i.putExtra("NEW_KEY", position); // position is being passed to activity, retrieve in Activity using getExtras() and use it as needed.
startActivity(i);

调用组件：

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组件中的条件变量？因此，只有在CONDITION为真时才能呈现Tab4。

第二个问题是：如何将班级MyNavStack中的道具传递给第一个标签画面？

提前致谢！

Answer 1

您可以为Stores > Configuration > General提供类似以下内容的属性：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

将道具传递给嵌套的Tabnavigator

1 个答案: