的TabBar圖標不顯示和選項都不起作用的反應本地

Question

我有問題的TabBar react-navigation

| react-navigation 1.0.0-beta.13 |

| react-native 0.48.4|

| node v6.11.4 |

| npm 3.10.10 |

import React from 'react'; 
import { 
    Text, 
    Platform 
} from 'react-native'; 
import { Constants } from "expo" 

import { 
    TabNavigator 
} from 'react-navigation'; 

import { Ionicons } from '@expo/vector-icons'; 

const MyHomeScreen = ({ navigation }) => (
    <Text>HOME</Text> 
); 

const MyNotificationScreen = ({ navigation }) => (
    <Text>NOTIFICATION</Text> 
); 

MyHomeScreen.navigationOptions = { 
    tabBarLabel: 'Home', 
    tabBarIcon: ({ tintColor, focused }) => (
     <Ionicons 
      name={'md-checkmark-circle'} 
      size={26} 
      style={{ color: tintColor }} 
     /> 
    ), 
    showIcon: true, 
    showLabel: false 
}; 

MyNotificationScreen.navigationOptions = { 
    tabBarLabel: 'People', 
    tabBarIcon: ({ tintColor, focused }) => (
     <Ionicons 
      name={'md-checkmark-circle'} 
      size={26} 
      style={{ color: tintColor }} 
     /> 
    ), 
    showIcon: true, 
    showLabel: false 
}; 

const App = TabNavigator(
    { 
     Home: { 
      screen: MyHomeScreen, 
     }, 
     Notifications: { 
      screen: MyNotificationScreen, 
     }, 
    }, 
    { 
     tabBarOptions: { 
      activeTintColor: Platform.OS === 'ios' ? '#e91e63' : '#fff', 
     }, 
    } 
); 



export default() => <App /> 

Live preview

問題是圖標不顯示和標籤是可見的，但我設置showLabel爲false。

Answer 1

showIcon & showLabel是TabNavigator本身（在tabBarOptions下）的選項，而不是屏幕navigationOptions。