reactjs - 如何使用 native react 在选项卡导航下的页脚文本中设置图像

Question

我需要设置所有页面上都有图像和文本的页脚。我已经使用了 React Native TabNavigator。问题是页脚文本以大写形式显示，背景颜色也没有改变，无法在页脚中设置图像。

  {
  tabBarPosition: 'bottom',
  tabBarOptions: {
    activeTintColor: 'white',
    inactiveTintColor: 'black',
    activeBackgroundColor: 'darkgreen',
    inactiveBackgroundColor: 'green',
    tabBarIcon: ({ tintColor }) => {
    return (
    <Image
    source={('.../.../image/png')}
    style={{ tintColor }}
    /> 
}
});

如何在页脚中设置图像？

我是 React Native 的新手。

提前致谢。

Answer 1

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导入并使用它而不是图像!