如何使用 React Native 在 TabNavigation 下的页脚文本中设置图像 [英] How to set images in the footer text under TabNavigation using react native

问题描述

我需要设置在所有页面上都有图像和文本的页脚.我使用过本机 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屋！