无法使用嵌套堆栈导航器向底部标签栏添加图标

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}/>  
      )  
      }
    },