＃タブバーアイテムに画像を追加しようとしていますが、reactナビゲーションに読み込めません＃
##私は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
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}
/>
);
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加