无法将图像添加到标签栏项目反应导航
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: () => <Image/>
返回它
【参考方案1】:
tabBarIcon
给定
focused: boolean, horizontal: boolean, tintColor: string
的 React 元素或函数返回 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】:请使用 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>
【讨论】:
以上是关于无法将图像添加到标签栏项目反应导航的主要内容,如果未能解决你的问题,请参考以下文章