无法使用嵌套堆栈导航器将图标添加到底部选项卡栏

Question

我有这个导航器，我正在尝试添加 1 个图标并更改选项卡栏的背景颜色（如果可能的话，图标和标签。

    import React from 'react';
import { createAppContainer, createSwitchNavigator } from 'react-navigation';
import { createStackNavigator } from 'react-navigation-stack';
import { BottomTabBar, createBottomTabNavigator } from 'react-navigation-tabs';
import AccountScreen from './src/screens/AccountScreen';
import SigninScreen from './src/screens/SigninScreen';
import SignupScreen from './src/screens/SignupScreen';
import TrackCreateScreen from './src/screens/TrackCreateScreen';
import TrackListScreen from './src/screens/TrackListScreen';
import TrackDetailScreen from './src/screens/TrackDetailScreen';
import { Provider as AuthProvider } from './src/context/AuthContext';
import {setNavigator} from './src/navigationRef';
import ResolveAuthScreen from './src/screens/ResolveAuthScreen';
import Icon from 'react-native-vector-icons/Ionicons';  
 
const switchNavigator = createSwitchNavigator({
  ResolveAuth: ResolveAuthScreen,
  loginFlow: createStackNavigator({
    Signin: SigninScreen,
    Signup: SignupScreen,
  }),
  mainFlow: createBottomTabNavigator({
    trackListFlow: createStackNavigator({
      TrackList: TrackListScreen,
      TrackDetail: TrackDetailScreen,
    }),
    TrackCreate: {
      screen: TrackCreateScreen,
      navigationOptions:{
        tabBarLabel: 'Crear Track',
        tabBarIcon: ({tintColor})=>(  
          <Icon name="ios-analytics" color={tintColor} size={25}/>  
      )  
      }
    },
    Account: {
      screen: AccountScreen, 
      navigationOptions:{
        tabBarLabel: 'Cuenta',
        tabBarIcon: ({tintColor})=>(  
          <Icon name="ios-person" color={tintColor} size={25}/>  
      )  
      }
    },
  })
});

const App = createAppContainer(switchNavigator);

export default () => {
  return (
    <AuthProvider>
      <App  ref={(navigator) => {setNavigator(navigator)}}/>
    </AuthProvider>
  );
};

仅选项卡没有问题，但具有嵌套堆栈导航器的选项卡不允许我设置图标和标签。

而且我找不到任何信息或方法来为这个标签添加背景颜色。

有什么想法吗？

亲切的问候。

Answer 1

发生这种情况是因为您没有为第一个选项卡提供图标。请使用以下块更新 tasklistflow

trackListFlow: {
      screen: createStackNavigator({
      TrackList: TrackListScreen,
      TrackDetail: TrackDetailScreen,
    }),
      navigationOptions:{
        tabBarLabel: 'Task List Flow',
        tabBarIcon: ({tintColor})=>(  
          <Icon name="ios-analytics" color={tintColor} size={25}/>  
      )  
      }
    },

无法使用嵌套堆栈导航器将图标添加到底部选项卡栏

Unable to add an Icon to Bottom Tab Bar with Nested Stack Navigator

ionicons

react-native

react-navigation