无法将图像添加到标签栏项目反应导航

Posted

技术标签:

【中文标题】无法将图像添加到标签栏项目反应导航【英文标题】:not able to add image to tab bar item react navigation 【发布时间】:2019-08-10 05:37:35 【问题描述】:

# 我正在尝试将图像添加到标签栏项目,但无法在反应导航中加载 #

##我指的是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);

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

【问题讨论】:

尝试通过tabBarIcon: () =&gt; &lt;Image/&gt;返回它 【参考方案1】:

tabBarIcon

给定 focused: boolean, horizontal: boolean, tintColor: string 的 React 元素或函数返回 React.Node,以 显示在标签栏中。 horizontaltrue 当设备在 横向和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】:

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

import Container, Header, Content, Footer, FooterTab, Button, Icon from 'native-base';

<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>

【讨论】:

以上是关于无法将图像添加到标签栏项目反应导航的主要内容,如果未能解决你的问题,请参考以下文章

将标签栏添加到导航控制器

无法将标签栏应用程序添加到 popToRootViewController

标签栏未正确显示图像

想在标签栏视图控制器中添加一个简单的导航栏

如何将图像应用到 Cordova 中的标签栏项目

在侧面反应导航标签栏?