Question

我是本机反应的新手。我想在tabLayout中更改背景颜色。我的代码在这里：

MainTabNavigator.js

import React from 'react';
import { Platform } from 'react-native';
import { createStackNavigator, createBottomTabNavigator } from 'react-navigation';

import TabBarIcon from '../components/TabBarIcon';
import HomeScreen from '../screens/HomeScreen';
import LinksScreen from '../screens/LinksScreen';
import SettingsScreen from '../screens/SettingsScreen';

const HomeStack = createStackNavigator({
  Home: HomeScreen,
});

HomeStack.navigationOptions = {
  tabBarLabel: 'Offer',
  tabBarIcon: ({ focused }) => (
    <TabBarIcon
      focused={focused}
      name={
        Platform.OS === 'ios'
          ? `ios-information-circle${focused ? '' : '-outline'}`
          : 'md-information-circle'
      }
    />
  ),
};

const LinksStack = createStackNavigator({
  Links: LinksScreen,
});

LinksStack.navigationOptions = {
  tabBarLabel: 'Categories',
  tabBarIcon: ({ focused }) => (
    <TabBarIcon
      focused={focused}
      name={Platform.OS === 'ios' ? `ios-link${focused ? '' : '-outline'}` : 'md-link'}
    />
  )
};

const SettingsStack = createStackNavigator({
  Settings: SettingsScreen,
});

SettingsStack.navigationOptions = {
  tabBarLabel: 'Settings',
  tabBarIcon: ({ focused }) => (
    <TabBarIcon
      focused={focused}
      name={Platform.OS === 'ios' ? `ios-options${focused ? '' : '-outline'}` : 'md-options'}
    />
  )
};

export default createBottomTabNavigator({

  LinksStack,
   HomeStack,
  SettingsStack,
});

我不知道我应该在代码中更改什么地方。

Answer 1

您可以在activeBackgroundColor中添加更多选项tabBarOptions，例如以下示例

const mainTabBarNav = createBottomTabNavigator({
    projectHome: ProjectHomeScreen,
    userInfo: UserInfoScreen,
    taskList: TaskListScreen,
    profile: ProfileScreen,
  }, {
    tabBarPosition: 'bottom',
    tabBarOptions: {
      activeTintColor: Colors.navigationTintColor,
      activeBackgroundColor: 'red',
      inactiveTintColor: Colors.tabbarNormal,
      swipeEnabled: false,
      showLabel: true,
      showIcon: true,
      style: {
        backgroundColor: 'white',
        paddingVertical: 10,
        height: 60
      },
      indicatorStyle: {
        backgroundColor: 'white',
      }
    },
    tabBarComponent: BottomTabBar,
    swipeEnabled: false,
    initialRouteName: screenNames.taskList,

  }

在createStackNavigator中更改背景颜色是否有问题？

1 个答案: