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"
..
推荐阅读
- tfs - 统一构建代理与统一测试代理之间有什么区别吗?
- spring - Kafka 和 NonTrustedHeaders 上的 SCDF 中的消息转换
- javascript - Mongo Operations 饿死了
- r - 具有月份(整数)和年份(整数)的矩阵,我希望使用 R 以日期或 POSIX 格式提取它
- java - 自动装配 NullPointerException SpringBoot
- shell - mailx 不工作,但 sendmail 工作
- laravel - '忘记'每个集合中的键
- c++ - 重载 + 和 - 运算符时出错
- batch-file - 自动化 FFmpeg/多核支持
- python - 循环日期