React Navigation:嵌套堆栈和选项卡导航器
React Navigation: nesting stack and tab navigator
我在 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",
}
);
navigationOptions
是组件的静态 属性,这不是指组件的实例,因此没有可用的道具。相反,如果我们将 navigationOptions
设为一个函数,那么 React Navigation 将使用包含 { navigation, navigationOptions, screenProps }
的对象调用它——在这种情况下,我们只关心 navigation
,这是与作为 this.props.navigation
.
传递给您的屏幕道具
navigationOptions = ({ navigation }) => {
return {
headerRight: <Button title="home" onPress={() =>
navigation.navigate("routeC")}/>
}
}
我在 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",
}
);
navigationOptions
是组件的静态 属性,这不是指组件的实例,因此没有可用的道具。相反,如果我们将 navigationOptions
设为一个函数,那么 React Navigation 将使用包含 { navigation, navigationOptions, screenProps }
的对象调用它——在这种情况下,我们只关心 navigation
,这是与作为 this.props.navigation
.
navigationOptions = ({ navigation }) => {
return {
headerRight: <Button title="home" onPress={() =>
navigation.navigate("routeC")}/>
}
}