如何使用 React Native 在 TabNavigation 下的页脚文本中设置图像 [英] How to set images in the footer text under TabNavigation using react native
本文介绍了如何使用 React Native 在 TabNavigation 下的页脚文本中设置图像的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我需要设置在所有页面上都有图像和文本的页脚.我使用过本机 TabNavigator.问题是页脚文本以大写形式显示,背景颜色没有改变,无法在页脚中设置图像.
I need to set footer which has image and text on all pages. I have used react native TabNavigator. The issue is footer text was shown in Uppercase and also the background color doesn't change and unable to set image in the footer.
{
tabBarPosition: 'bottom',
tabBarOptions: {
activeTintColor: 'white',
inactiveTintColor: 'black',
activeBackgroundColor: 'darkgreen',
inactiveBackgroundColor: 'green',
tabBarIcon: ({ tintColor }) => {
return (
<Image
source={('.../.../image/png')}
style={{ tintColor }}
/>
}
});
如何在页脚中设置图片?
How does the image will be set in the footer?
我是本机反应的新手.
提前致谢.
推荐答案
TabNavigator 有一个选项 init,您可以设计带有标签页脚的图标...这是代码:
TabNavigator has an option init that you can design Icon with Label footer... here is the code:
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
导入并使用它而不是 Image!
and if you want to set icon install icon-vectors
import and use it instead of Image!
这篇关于如何使用 React Native 在 TabNavigation 下的页脚文本中设置图像的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文