我需要设置在所有页面上都有图像和文本的页脚。我使用过本机 TabNavigator。问题是页脚文本以大写形式显示，背景颜色没有改变并且无法在页脚中设置图像。
{
tabBarPosition: 'bottom',
tabBarOptions: {
activeTintColor: 'white',
inactiveTintColor: 'black',
activeBackgroundColor: 'darkgreen',
inactiveBackgroundColor: 'green',
tabBarIcon: ({ tintColor }) => {
return (
<Image
source={('.../.../image/png')}
style={{ tintColor }}
/>
}
});
如何在页脚中设置图像？
我是本机react的新手。
提前致谢。
TabNavigator有一个选项 init 你可以设计带有标签页脚的图标......这是代码：
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,0,0,1)',
inactiveTintColor : 'rgba(0,0,0,.3)'
},
tabBarComponent : TabBarBottom,
tabBarPosition : 'bottom'
})
如果你想设置图标安装icon-vectors导入并使用它而不是图像！
交换样式指南时问题得到解决
navigationOptions : {
tabBarIcon :
<Image
style={{width: 25, height:20,paddingTop:0}}
source={{uri: './assets/images/search.png'}}
/>
}