[英]React-native change stack navigator title based on what is selected from nested drawer navigation
I have a drawer navigator nested inside a stack navigator like so 我有一个嵌套在堆栈导航器中的抽屉导航器,如下所示
const DrawerNavigation = DrawerNavigator({
Home: {
screen: Home,
navigationOptions: {
drawerLabel: 'Home',
drawerIcon: () => (
<MaterialCommunityIcons name={'home'} size={25} />
)
},
},
Customers: {
screen: Customers,
navigationOptions: {
drawerLabel: 'Customers',
drawerIcon: () => (
<MaterialCommunityIcons name={'account-switch'} size={25} />
)
},
},
}, {
drawerPosition: 'right',
})
const Navigation = StackNavigator({
Home: {
screen : DrawerNavigation,
navigationOptions: ({ navigation }) => ({
title: navigation.state.routeName, // Always 'Home'
}),
},
})
This gave me the layout I desired, with a "title bar" that displays on both IOS and android, and makes the drawer navigation the main method of navigating the application. 这给了我想要的布局,并在IOS和android上同时显示了“标题栏”,并使抽屉式导航成为导航应用程序的主要方法。 However, I would like the title prop for the stack navigator to display the name of whatever screen is selected from the drawer navigator rather than a static string.
但是,我希望堆栈导航器的标题道具显示从抽屉导航器选择的任何屏幕的名称,而不是静态字符串。 Is this possible with this current setup?
当前的设置是否可行? Perhaps this is the incorrect approach - I am new to react-native's navigation.
也许这是不正确的方法-我是本机导航的新手。
You can add title for each screen in the navigationOptions for each screen. 您可以在每个屏幕的navigationOptions中为每个屏幕添加标题。
const DrawerNavigation = DrawerNavigator({
Home: {
screen: Home,
navigationOptions: {
drawerLabel: 'Home',
title: 'Home, sweet home!' // <=== add this
drawerIcon: () => (
<MaterialCommunityIcons name={'home'} size={25} />
)
},
},
Customers: {
screen: Customers,
navigationOptions: {
drawerLabel: 'Customers',
title: 'Dear customers', // <=== and this
drawerIcon: () => (
<MaterialCommunityIcons name={'account-switch'} size={25} />
)
},
},
}, {
drawerPosition: 'right',
})
const Navigation = StackNavigator({
Home: {
screen : DrawerNavigation,
navigationOptions: ({ navigation }) => ({
title: navigation.state.routeName, // <=== remove this
}),
},
})
Also, you can set title on each screen component, more details here 另外,您可以在每个屏幕组件上设置标题,更多详细信息在这里
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.