reactjs – 如何使用react native在TabNavigation下的页脚文本中设置图像

我需要在所有页面上设置包含图像和文本的页脚.我使用了反应原生的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'
})

如果你想设置图标安装图标矢量导入并使用它而不是图像！

reactjs – 如何使用react native在TabNavigation下的页脚文本中设置图像

相关文章