![](/img/trans.png)
[英]React native: How can I have multiple drawer navigator links point to screens within the same stack navigator
[英]how can i add icons to drawer navigator items that have stack navigation in react native
我想将图标添加到具有单独堆栈导航屏幕的抽屉项目中。 当我尝试将抽屉图标添加到主屏幕内的导航选项时,什么也没有显示。 这是我的代码片段
const HomeScreenNav = createStackNavigator({
main: {screen: Main },
providers: { screen: Providers},
providerProfile: { screen: ProviderProfile},
}, {
initialRouteName: 'main',
})
然后我的抽屉导航
const AppDrawerNavigation = createDrawerNavigator({
home: { screen: HomeScreenNav },
appointments: {screen: Appointments}
}, {
initialRouteName: 'home',
drawerBackgroundColor: '#fff7fc',
contentComponent: drawerComponent,
})
您必须将navigationOptions添加到抽屉导航的路由中。 这是您可以添加图标和其他组件(如文本,标签,标题等)并自定义导航抽屉的方式。 这是修改后的代码:
const AppDrawerNavigation = createDrawerNavigator({
home: { screen: HomeScreenNav,
navigationOptions: {
drawerIcon: (
<Icon name={$YourIconName} size={24}
..
//you can also add color and other Icon props here
/>
),
},
},
appointments: {screen: Appointments,
navigationOptions: {
drawerIcon: (
<Icon name={$YourIconName} size={24}
..
//you can also add color and other Icon props here
/>
),
},
}
}, {
initialRouteName: 'home',
drawerBackgroundColor: '#fff7fc',
contentComponent: drawerComponent,
})
下面是代码,将其添加到navigationOptions内,以介绍如何将自定义文本添加到导航抽屉:
..
drawer: {
label: () => <Text>My Home</Text>
},
..
同样,您可以在标题中指定标题,您希望在抽屉导航器中选择相应选项时更改标题。
..
title:"My Home"
..
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.