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: ScreenOne,
  Settings: Screentwo,
  Preference: Preferences
},
{  
  initialRouteName: "Home",
  showLabel: false,
  tabBarPosition: 'bottom',
  tabBarOptions: {
    activeTintColor: 'blue',
    inactiveTintColor: 'grey',
    style: {
      backgroundColor: 'darkcerulean'
    },
    labelStyle: {
      fontSize: 13
    }
  },
  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}
        />
      );
    }
  }
  )
}
);


export default createAppContainer(TabNavigator);

我想将图像添加到标签栏图标，并想要更改标签栏背景颜色

Answer 1

您需要像以前这样加载您的需求

const images = {
  imagepathA: require('../images/Help_Header_Icon.png'),
  imagepathB: require('../images/Settings.png'),
  imagepathC: require('../images/Preference.png'),
};

并在您的回报中像这样使用它

 if (routeName === "Home") {
    imagepath = images.imagepathA;
  } else if (routeName === "Settings") {
    imagepath = images.imagepathB;
  } else if (routeName === "Preference") {
    imagepath = images.imagepathC;
  }
  return (
        <Image
          style={{ width: 30, height: 30, resizeMode: "stretch" }}
          source={imagepath}
        />
      );

我正在尝试将图像添加到选项卡栏项目，但未加载

1 个答案: