Question

为什么导航中不显示我放在标题左参数上的图标？在我看来，每件事都是正确的，Icon已导入。您能帮忙找到问题吗，这是我的代码：

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

如果使用反应导航版本3，则必须使用defaultNavigationOptions代替navigationOptions

Answer 2

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

const TabBarNavig = TabNavigator({
  //your component here
})

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

Answer 3

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

用 createBottomTabNavigator

替换 TabNavigator

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

我认为这可以解决您的问题

TabNavigator的headerLeft问题

3 个答案: