我的设置很像这样：
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
原文链接：https://www.f2er.com/react/300685.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“]
//(navigation.state.routes[navigation.state.index][\”routes\”])[(navigation.state.routes[navigation.state.index][\”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
下载此文件并执行以下操作.
>
npm install //to get dependencies
>
react-native upgrade //to get android and ios folder
>
react-native link //to link dependencies and libraries
>
react-native run-ios (or) react-native run-android
你可以使用上面的,如果有的话,让我知道.
