我需要在所有页面上设置包含图像和文本的页脚.我使用了反应原生的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'
})
如果你想设置图标安装图标矢量导入并使用它而不是图像！
