reactjs – StackNavigator中嵌套的TabNavigator：控制标题
发布时间：2020-12-15 20:41:26 所属栏目：百科 来源：网络整理
导读：我的设置很像这样： let Tabs = createBottomTabNavigator({ screen1: Screen1,screen2: Screen2})let Stack = createStackNavigator({ tabs: Tabs otherScreen: OtherScreen}) 堆栈导航器有一个标题,没关系.我想要的是获取不同的标题图标取决于我目前在哪个
|
我的设置很像这样：
let Tabs = createBottomTabNavigator({
screen1: Screen1,screen2: Screen2
})
let Stack = createStackNavigator({
tabs: Tabs
otherScreen: OtherScreen
})
堆栈导航器有一个标题,没关系.我想要的是获取不同的标题图标取决于我目前在哪个标签上. 我使用以下版本： "react": "16.3.1","react-native": "~0.55.2","react-navigation": "^2.2.5" 我已经考虑过切换我的设置,以便每个标签屏幕都有自己的StackNavigator,但我喜欢在切换标签时有滑动动画,我不希望标题图标滑动.标题栏应保持静态,但根据当前标签显示不同的图标.
您可以使用如下所示,https://reactnavigation.org/docs/en/stack-navigator.html
//Screen1 Stack.
const Screen1 = createStackNavigator ({
Home: {
screen: Home,navigationOptions: {
header: null //Need to set header as null.
}
}
});
//Screen2 Stack
const Screen2 = createStackNavigator ({
Profile: {
screen: Profile,navigationOptions: {
header: null //Need to set header as null.
}
}
});
let Tabs = createMaterialTopTabNavigator({
Screen1:{
screen: Screen1 //Calling Screen1 Stack.
},Screen2:{
screen: Screen2 //Calling Screen2 Stack.
}
},{ tabBarPosition: 'bottom' }) //this will set the TabBar at Bottom of your screen.
let Stack = createStackNavigator({
tabs:{
screen: Tabs,//You can add the NavigationOption here with navigation as parameter using destructuring.
navigationOptions: ({navigation})=>{
//title: (navigation.state.routes[navigation.state.index])["routeName"]
//this will fetch the routeName of Tabs in TabNavigation. If you set the routename of the TabNavigation as your Header.
//use the following title property,this will fetch the current stack's routeName which will be set as your header in the TabBar.
//title: (navigation.state.routes[navigation.state.index]["routes"])[(navigation.state.routes[navigation.state.index]["index"])].routeName
//you can use switch case,on matching the route name you can set title of the header that you want and also header left and right icons similarly.
switch ((navigation.state.routes[navigation.state.index]["routes"])[(navigation.state.routes[navigation.state.index]["index"])].routeName) {
case "Screen1":
return {
title: "Home",headerLeft: (<Button
onPress={()=> alert("hi")}
title="Back"
color="#841584"
accessibilityLabel="Learn more about this purple button"
/> ),headerRight: <Button title= "Right"/>
}
case "Screen2":
return {
title: "Profile",headerRight: <Button title= "Right"/>
}
default:
return { title: (navigation.state.routes[navigation.state.index]["routes"])[(navigation.state.routes[navigation.state.index]["index"])].routeName }
}
}
},otherScreen:{
screen: OtherScreen
}
})
// navigationOptions navigationOptions: ({navigation})=>{
//title: (navigation.state.routes[navigation.state.index])["routeName"]
//this will fetch the routeName of Tabs in TabNavigation. If you set the routename of the TabNavigation as your Header.
//use the following title property,this will fetch the current stack's routeName which will be set as your header in the TabBar.
//title: (navigation.state.routes[navigation.state.index]["routes"])[(navigation.state.routes[navigation.state.index]["index"])].routeName
switch ((navigation.state.routes[navigation.state.index]["routes"])[(navigation.state.routes[navigation.state.index]["index"])].routeName) {
case "Screen1":
return {
title: "Home",headerLeft: (<Button
onPress={()=> alert("hi")} //Here you can able to set the back behaviour.
title="Back"
color="#841584"
accessibilityLabel="Learn more about this purple button"
/> ),headerRight: <Button title= "Right"/>
}
case "Screen2":
return {
title: "Profile",headerLeft: (<Button
onPress={()=> alert("hi")}
title="Back"
color="#841584"
accessibilityLabel="Learn more about this purple button"
/> ),headerRight: <Button title= "Right"/>
}
default:
return { title: (navigation.state.routes[navigation.state.index]["routes"])[(navigation.state.routes[navigation.state.index]["index"])].routeName }
}
}
//alert(navigation.state) {
"routes":[
{
"key":"Screen1","routeName":"Screen1","routes":[
{
"key":"Home","routeName":"Home",}
],"index":0,"isTransitioning":false,"key":"id-1530276062643-0"
},{
"key":"Screen2","routeName":"Screen2","routes":[
{
"key":"Profile","routeName":"Profile","key":"id-1530276062643-0"
}
],"routeName":"tabs","key":"id-1530276062643-0"
}
//(navigation.state.routes[navigation.state.index])[”routeName“] this will give the current route name of the tab inside StackNavigation. 上面的代码将在根堆栈标题中设置标题,其中TabBar作为第一个路由驻留,因此我们将标题设置为null,用于TabBar中的单个堆栈.通过使用这种方式将在TabBar中切换屏幕时提供动画,因为标题将保持静态. 你可以在这里找到工作副本https://www.dropbox.com/s/jca6ssn9zkzh9kn/Archive.zip?dl=0 下载此文件并执行以下操作. >
>
>
>
你可以使用上面的,如果有的话,让我知道. （编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |