TabBarBottomでアイコン/画像がReact Nativeで表示されない

Question

TabNavigatorのドキュメントからサンプルコードを取得しましたが、アイコンや画像はiOSやAndroidには表示されません。ラベルのオーバーライドさえ有効にならないようです。私は間違って何をしていますか？

ここで私が使用してきたドキュメントへのリンクです：私はようやく私のスラムしたい後にそれを考え出し、

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

よし： https://reactnavigation.org/docs/navigators/tab

は、ここに私のコードですキーボードに向かいます。

タイトルとタブバーのアイコンは、実際にはドキュメント内の構造とは異なります。

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'が定義されています... 編集： タブナビゲーターからtabBarOptionsを削除したときに機能しました。 では、代わりにactiveTintColorとinactiveTintColorをTabBarBottomの小道具として使用しました。