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

Question

I have a TabNavigator inside a StackNavigator . I cannot define headers inside the different classes that are within the Tabs themself as the TabNavigator has no header (that I know of). So I tried to define the it when initializing the StackNavigator . A button appears on top, but pressing it gives an error for redirecting to an undefined place. probably the this.props.navigator.navigate part contains the mistake, with the this not referring to what I want it to refer to, but I can't find the right syntax anywhere.

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 is a static property of the component, this does not refer to an instance of the component and therefore no props are available. Instead, if we make navigationOptions a function then React Navigation will call it with an object containing { navigation, navigationOptions, screenProps } -- in this case, all we care about is navigation , which is the same object that is passed to your screen props as this.props.navigation .

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