我需要在所有页面上设置包含图像和文本的页脚.我使用了反应原生的TabNavigator.问题是页脚文本以大写字母显示,背景颜色也没有变化,无法在页脚中设置图像.
{ tabBarPosition: 'bottom',tabBarOptions: { activeTintColor: 'white',inactiveTintColor: 'black',activeBackgroundColor: 'darkgreen',inactiveBackgroundColor: 'green',tabBarIcon: ({ tintColor }) => { return ( <Image source={('.../.../image/png')} style={{ tintColor }} /> } });
如何在页脚中设置图像?
我是新来的本地人.
提前致谢.
TabNavigator有一个选项init,你可以用标签页脚来设计Icon …
这是代码:
这是代码:
import React from 'react'; import { StackNavigator,TabNavigator,TabBarBottom } from 'react-navigation'; import { Image,Text } from 'react-native'; import styles from './assets/style'; import Home from './pages/Home'; import Article from './pages/Article'; HomeStack = StackNavigator({ Home : { screen : Home },Article : { screen : Article } }) import Camera from './pages/Camera'; import Follow from './pages/Follow'; import HomeUser from './pages/HomeUser'; import Profile from './pages/Profile'; import Seach from './pages/Search'; export default App = TabNavigator({ Profile : { screen : Profile,navigationOptions : { tabBarIcon : <Image source={require('./assets/images/react-native.png')} style={styles.tabNavigatorProfileIcon} /> } },Follow : { screen : Follow,navigationOptions : { tabBarIcon : <Image source={require('./assets/images/follow.png')} style={styles.tabNavigatorProfileIcon} /> } },Camera : { screen : Camera,navigationOptions : { tabBarIcon : <Image source={require('./assets/images/camera.png')} style={styles.tabNavigatorProfileIcon} /> } },Serach: { screen : Seach,navigationOptions : { tabBarIcon : <Image source={require('./assets/images/search.png')} style={styles.tabNavigatorProfileIcon} /> } },HomeUser : { screen : HomeUser,navigationOptions : { tabBarIcon : <Image source={require('./assets/images/home.png')} style={styles.tabNavigatorProfileIcon} /> } } },{ tabBarOptions : { showLabel : false,activeTintColor : 'rgba(0,1)',inactiveTintColor : 'rgba(0,.3)' },tabBarComponent : TabBarBottom,tabBarPosition : 'bottom' })
如果你想设置图标安装图标矢量导入并使用它而不是图像!
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。