图标/图像在React Native中不显示TabBarBottom

Question

我几乎从TabNavigator文档中获取示例代码，并且图标的/图像不会显示在iOS或Android上。即使标签覆盖似乎也不会生效。我究竟做错了什么？

这里的链接来我一直在使用的文档： https://reactnavigation.org/docs/navigators/tab

这里是我的代码：

class MyHomeScreen extends React.Component { 
    static navigationOptions = { 
    tabBarLabel: 'Not displayed', 
    // Note: By default the icon is only shown on iOS. Search the showIcon option below. 
    tabBarIcon: ({ tintColor }) => (
     <Image 
     source={require('./chats-icon.png')} 
     style={[styles.icon, {tintColor: tintColor}]} 
     /> 
    ), 
    }; 

    render() { 
    return (
     <Button 
     onPress={() => this.props.navigation.navigate('Notifications')} 
     title="Go to notifications" 
     /> 
    ); 
    } 
} 

class MyNotificationsScreen extends React.Component { 
    static navigationOptions = { 
    tabBarLabel: 'Notifications', 
    tabBarIcon: ({ tintColor }) => (
     <Image 
     source={require('./notif-icon.png')} 
     style={[styles.icon, {tintColor: tintColor}]} 
     /> 
    ), 
    }; 

    render() { 
    return (
     <Button 
     onPress={() => this.props.navigation.goBack()} 
     title="Go back home" 
     /> 
    ); 
    } 
} 

const styles = StyleSheet.create({ 
    icon: { 
    width: 26, 
    height: 26, 
    }, 
}); 

const MyApp = TabNavigator({ 
    Displayed: { 
    screen: MyHomeScreen, 
    }, 
    Notifications: { 
    screen: MyNotificationsScreen, 
    }, 
}, { 
    tabBarOptions: { 
    activeTintColor: '#e91e63', 
    }, 
}); 

Answer 1

好吧，我终于想通了想踩住后，我面对键盘。

标题和标签栏图标实际上是与文档内部结构不同的结构。

const MyApp = TabNavigator({ 
    Displayed: { 
     screen: MyHomeScreen, 
     navigationOptions: { 
      title: 'Favorites', 
      tabBar: { 
      icon: ({tintColor}) => (<Image 
       source={require('./chats-icon.png')} 
       style={{width: 26, height: 26, tintColor: tintColor}} 
      />) 
      }, 
     }, 
    }, 
    ... 

或

class MyHomeScreen extends React.Component { 
    static navigationOptions = { 
     title: 'Foo Bar', 
     tabBar: { 
      icon: ({ tintColor }) => (
       <Image 
       source={require('./chats-icon.png')} 
       style={{width: 26, height: 26, tintColor: tintColor}} 
       /> 
      ), 
     } 
     }; 
... 

Answer 2

得到了同样的问题，但这种解决方案并没有为我工作。在导航选项中定义了无效的'tabBar'... 编辑： 当我从tab选项卡导航器中删除tabBarOptions时，它工作正常。 改为使用activeTintColor和inactiveTintColor作为TabBarBottom的道具。