Question

＃我正在尝试将图像添加到选项卡栏项，但无法加载到反应导航中

##我指的是https://github.com/react-navigation/react-navigation/issues/1205#issuecomment-296708338 ##

import React from 'react';
import { Text, View, Image } from 'react-native';
import { createBottomTabNavigator, createAppContainer } from 'react-navigation'
import ScreenOne from './ScreenOne';
import Screentwo from './Screentwo';
import Preferences from './Preferences';




const TabNavigator = createBottomTabNavigator(
  {
  Home: {
    screen : ScreenOne,
    navigationOptions: {
      showLabel: false,
      tabBarIcon: <Image style={{ width: 30, height: 30 }} source={require('../images/Help_Header_Icon.png'
      )}/>,
      showIcon: true,
      activeTintColor: '#00000',
      inactiveTintColor: '#000000'
    }
  },
  Settings: Screentwo,
  Preference: Preferences
},
{  
  initialRouteName: "Home"
}
);


export default createAppContainer(TabNavigator);

###希望在标签栏项中显示图像并隐藏标签栏标签###

Answer 1

请使用Nativebase https://docs.nativebase.io/Components.html#footer-tabs-icon-headref

从“本机库”导入{容器，页眉，内容，页脚，FooterTab，按钮，图标}；

<Footer>
      <FooterTab>
        <Button>
          <Icon name="apps" />
        </Button>
        <Button>
          <Icon name="camera" />
        </Button>
        <Button active>
          <Icon active name="navigate" />
        </Button>
        <Button>
          <Icon name="person" />
        </Button>
      </FooterTab>
    </Footer>

Answer 2

tabBarIcon

React Element或给定{ focused: boolean, horizontal: boolean, tintColor: string }的函数将React.Node返回到显示在标签栏中。设备处于运行状态时，horizontal是true 横向，false为纵向。该图标会在任何时候重新渲染设备方向发生变化。

用法

 {
    defaultNavigationOptions: ({ navigation }) => ({
      tabBarIcon: ({ focused, horizontal, tintColor, image }) => {
        const { routeName } = navigation.state;
        let imagepath;
        if (routeName === "Home") {
          imagepath = require('../images/Help_Header_Icon.png');
        } else if (routeName === "Settings") {
          imagepath = require('../images/Settings.png');
        } else if (routeName === "Preference") {
          imagepath = require('../images/Preference.png');
        }
        return (
          <Image
            style={{ width: 30, height: 30, resizeMode: "stretch" }}
            source={imagepath}
          />
        );

无法将图像添加到选项卡栏项目反应导航

2 个答案: