headerTabNavigator的左问题

Question

为什么我的导航没有显示我在标题左侧参数上放置的图标？在我看来，一切都是正确的，图标是导入的。你能帮忙找到问题吗，这是我的代码：

const TabBarNavig = TabNavigator({
  Places  : {
    screen :AddPlaces,
    navigationOptions: ({ navigation }) => ({
      title: 'Placements'
    })
  },
  GetPlaces : GetPlaces,
  New : New
});
TabBarNavig.navigationOptions = ({ navigation }) => {
  const { state: { routes, index } } = navigation; 
  const navigationOptions = {};
  navigationOptions.headerLeft = () => {
    return (
      <Icon 
        name = 'menu'
        size = { 20}
        color = 'white'
        style={{paddingTop:20}}
      /> 
    );
  }
};

Answer 1

如果您尝试将图标放在选项卡本身的顶部，则必须使用StackNavigator

const TabBarNavig = TabNavigator({
  //your component here
})
const YNavigator = StackNavigator ({
  Home:{screen: TabBarNavig,
    navigationOptions: ({navigation}) => ({
      headerLeft: <Icon name="menu" size={20} color="white" />,
    })
  },
})

Answer 2

如果使用 react 导航版本 3，则必须使用 defaultNavigationOptions 而不是 navigationOptions

Answer 3

const TabBarNavig = TabNavigator({
  Places  : {
    screen :AddPlaces,
    navigationOptions: ({ navigation }) => ({
      title: 'Placements'
    })
  },
  GetPlaces : GetPlaces,
  New : New
});

将 TabNavigator

替换为 createBottomTabNavigator

const TabBarNavig = createBottomTabNavigator({
  Places  : {
    screen :AddPlaces,
    navigationOptions: ({ navigation }) => ({
      title: 'Placements'
    })
  },
  GetPlaces : GetPlaces,
  New : New
});

我认为这将解决您的问题