Question

我需要在所有页面上设置包含图像和文本的页脚。我用过本机TabNavigator。问题是页脚文本以大写字母显示，背景颜色也没有变化，也无法在页脚中设置图像。

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

如何在页脚中设置图像？

我是新来的本地人。

提前致谢。

Answer 1

TabNavigator 有一个init选项，您可以使用Label页脚设计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,0,0,1)',
        inactiveTintColor : 'rgba(0,0,0,.3)'
    },
    tabBarComponent : TabBarBottom,
    tabBarPosition : 'bottom'
})

如果你想设置图标install icon-vectors import并使用它而不是Image！

Answer 2

在将样式指南换成

时，问题得到解决

navigationOptions : {
    tabBarIcon : 
         <Image
           style={{width: 25, height:20,paddingTop:0}}
           source={{uri: './assets/images/search.png'}}
        />
        }

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

2 个答案: