圖標/圖像在React Native中不顯示TabBarBottom

我幾乎從TabNavigator文檔中獲取示例代碼，並且圖標的/圖像不會顯示在iOS或Android上。即使標籤覆蓋似乎也不會生效。我究竟做錯了什麼？圖標/圖像在React Native中不顯示TabBarBottom

這裏的鏈接來我一直在使用的文檔： 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', 
    }, 
});

來源

2017-04-22 theHarvester

你確定在'styles.icon'中設置了'width'和'height'嗎？ –

@ViktorSeč是的，它就在那裏的樣式sheet.create代碼。 – theHarvester

好吧，我終於想通了想踩住後，我面對鍵盤。

標題和標籤欄圖標實際上是與文檔內部結構不同的結構。

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}} 
       /> 
      ), 
     } 
     }; 
...

來源

2017-04-22 22:33:24 theHarvester

得到了同樣的問題，但這種解決方案並沒有爲我工作。在導航選項中定義了無效的'tabBar'... 編輯：當我從tab選項卡導航器中刪除tabBarOptions時，它工作正常。改爲使用activeTintColor和inactiveTintColor作爲TabBarBottom的道具。

來源

2018-01-19 05:36:16

這並沒有真正回答這個問題。如果您有不同的問題，可以通過單擊[提問]（https://stackoverflow.com/questions/ask）來提問。您可以[添加賞金]（https://stackoverflow.com/help/privileges/set-bounties）在您擁有足夠的[聲譽]（https://stackoverflow.com/help/）後吸引更多關注此問題什麼聲譽）。 - [來自評論]（/ review/low-quality-posts/18561715） – Ghost

並刪除tabBar鍵。並將tabBarIcon和tabBarLabel與標籤導航器屏幕放在一起。 –

圖標/圖像在React Native中不顯示TabBarBottom

回答

相關問題