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

Question

我在 StackNavigator 里面有一个 TabNavigator。我无法在选项卡本身内的不同类内定义 headers，因为 TabNavigator 没有 header（据我所知）。所以我试图在初始化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 } 的对象调用它——在这种情况下，我们只关心 navigation，这是与作为 this.props.navigation.

传递给您的屏幕道具

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

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

React Navigation: nesting stack and tab navigator

reactjs

navigation

native