React Navigation：嵌套堆栈和选项卡导航器答案

【问题标题】：React Navigation: nesting stack and tab navigatorReact Navigation：嵌套堆栈和选项卡导航器
【发布时间】：2023-03-22 08:59:01
【问题描述】：

我在StackNavigator 中有一个TabNavigator。我无法在选项卡本身内的不同类中定义标题，因为TabNavigator 没有标题（我知道）。所以我尝试在初始化StackNavigator 时定义它。顶部出现一个按钮，但按下它会导致重定向到未定义位置的错误。可能this.props.navigator.navigate 部分包含错误，this 不是指我希望它指的内容，但我在任何地方都找不到正确的语法。

const NestedNavigator = createBottomTabNavigator ({
  "route1" : {screen : Screen1,
  },
  "route2" : Screen2,
  "route3" : Screen3
  }, 
);

const Navigator = createStackNavigator ({
  "routeA" : ScreenA,
  "routeB" : {
    screen : NestedNavigator, 
    navigationOptions: { headerRight: (<Button title="home" onPress={() => this.props.navigation.navigate("routeC")}/>)}},
  "routeC" : ScreenB},
  {
    initialRouteName: "routeA",
  }
);

【问题讨论】：

标签： reactjs navigation native

【解决方案1】：

navigationOptions 是组件的静态属性，它不引用组件的实例，因此没有可用的道具。相反，如果我们将 navigationOptions 设为函数，那么 React Navigation 将使用包含 { navigation, navigationOptions, screenProps } 的对象调用它——在这种情况下，我们只关心 navigation，它与传递给屏幕道具的对象相同作为this.props.navigation。

navigationOptions = ({ navigation }) => { 
  return {
    headerRight: <Button title="home" onPress={() => 
                   navigation.navigate("routeC")}/>
  }
}

【讨论】：