时间戳

首页 > 解决方案 > React Navigation：嵌套堆栈和选项卡导航器

reactjs - React Navigation：嵌套堆栈和选项卡导航器

问题描述

我有一个TabNavigator里面的StackNavigator。我无法在选项卡本身的不同类中定义标题，因为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",
  }
);

标签： reactjsnavigationnative

解决方案

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

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

推荐阅读