Question

我在TabNavigator中有一个StackNavigator。我无法在Tabs内的不同类中定义标头，因为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",
  }
);

Answer 1

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

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

React Navigation：嵌套堆栈和标签导航器

1 个答案: