底部標簽導航器背景圖像

Question

我正在使用React Navigation 3 。 目前，我的項目中有一個bottomTabNavigator 。 我想為它設置背景圖片或藝術。 我的標題非常簡單，因為我使用了一個名為headerBackground的屬性，並且我向它傳遞了一個 react 組件並且它可以工作，但對於 bottomTab 則不是這種情況。

我設法通過使用tabBarComponent使其以某種方式工作，因此圖像呈現正常，但問題是我的選項卡消失了。

是否有將背景圖像設置為tabNavigator的正確方法？

這是我當前的tabNavigator代碼：

 import React from 'react'; import { createBottomTabNavigator, createAppContainer } from 'react-navigation'; import Profile from "../components/Profile"; import { Image, View } from 'react-native'; const Tab = createBottomTabNavigator( { Profile: { screen: Profile, navigationOptions: { title: 'Home', tabBarIcon: ({ tintColor }) => ( <Image source={require('../../images/home-ico.png')} style={{width: 25, height: 25, resizeMode: 'contain'}} /> ) } }, Partidos: { screen: Profile, navigationOptions: { title: 'Home', tabBarIcon: ({ tintColor }) => ( <Image source={require('../../images/home-ico.png')} style={{width: 25, height: 25, resizeMode: 'contain'}} /> ) } }, Grupos: { screen: Profile, navigationOptions: { title: 'Home', tabBarIcon: ({ tintColor }) => ( <Image source={require('../../images/home-ico.png')} style={{width: 25, height: 25, resizeMode: 'contain'}} /> ) } }, Reserva: { screen: Profile, navigationOptions: { title: 'Home', tabBarIcon: ({ tintColor }) => ( <Image source={require('../../images/home-ico.png')} style={{width: 25, height: 25, resizeMode: 'contain'}} /> ) } } }, { tabBarOptions:{ style: { backgroundColor: '#c2b464', }, showLabel: false }, tabBarComponent: props =>{ return( <View> <Image style={{ width: '100%', height: 50 }} source={ require('../../images/tabs-bg.png')}/> </View> ); } } ); export default createAppContainer(Tab);

Answer 1

tabBarComponent: props =><BottomNavigator {...props}/>

只需制作組件並在其中創建圖標或文本並渲染它。 在組件下你可以通過this.props.navigation.navigate('desirescreen-route');導航到其他屏幕this.props.navigation.navigate('desirescreen-route');