想要为页眉添加按钮,因此当转到“个人资料”时,TAB不会关闭。为Tab导航器添加了屏幕“配置文件”(但隐藏TabBar)。
如何在ReactNavigation v5中将嵌套的导航器传递给Parent?所以我可以使用嵌套导航器的“导航”。当前无法使用,因为Stack导航器仅了解“登录”和“家庭”路线。
export default class RootTabs extends Component {
render() {
return (
<Stack.Navigator>
<Stack.Screen
name="Login"
component={LoginView}
options={{ headerShown: false }} />
<Stack.Screen
name="Home"
component={HomeTabs}
options={{ headerShown: false }}
options={({ route, navigation }) => ({
headerTitle: getHeaderTitle(route),
headerRight: () => (
<Button onPress={() = > navigation.navigate('Profile')} title="Profile" />
),
headerLeft: null
})}>
</Stack.Screen>
</Stack.Navigator>
)
}
}
找到了最接近的正确解决方案,但是它不起作用,因为'this.navigator'始终为空
export default class RootTabs extends Component {
gotoprofile = () => {
this.navigator && this.navigator.navigation.navigate('Login')
}
render() {
return (
<Stack.Navigator>
<Stack.Screen
name="Login"
component={LoginView}
options={{ headerShown: false }} />
<Stack.Screen ref={nav => this.navigator = nav}
name="Home"
component={HomeTabs}
options={{ headerShown: false }}
options={({ route, navigation }) => ({
headerTitle: getHeaderTitle(route),
headerRight: () => (
<Button onPress={this.gotoprofile} title="Profile" />
),
headerLeft: null
})}>
</Stack.Screen>
</Stack.Navigator>
)
}
}
这是我的标签浏览器
<Tab.Navigator
initialRouteName="News"
tabBarOptions={{
activeTintColor: '#2f4f4f',
}}
tabBar={props =>
<BottomTabBar
{...props}
state={{ ...props.state, routes: props.state.routes.slice(0, 5) }}>
</BottomTabBar>
}>
<Tab.Screen
name="News"
component={NewsView}/>
<Tab.Screen
name="Finance"
component={FinanceView}/>
<Tab.Screen
name="Security"
component={SecurityView}/>
<Tab.Screen
name="Services"
component={ServicesView}/>
<Tab.Screen
name="Ideas"
component={IdeasView}/>
<Tab.Screen
name="Profile"
component={ProfileView}/>
</Tab.Navigator>