Реагируйте Навигация: вложенный стек и вкладка навигатор

Question

У меня есть 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",
  }
);

Answer 1

navigationOptions - это статическое свойство компонента, оно не относится к экземпляру компонента, и поэтому реквизиты недоступны. Вместо этого, если мы сделаем navigationOptions функцией, то React Navigation будет вызывать ее с объектом, содержащим {navigation, navigationOptions, screenProps} - в этом случае все, что нам нужно, - это навигация, то есть тот же объект, который передается на экран как this.props.navigation.

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