底部标签导航器背景图像

Question

Im using React Navigation 3 . Currently I have a bottomTabNavigator in my project. I want to set a background image or art for it. My header was pretty much straight forward because I used a property called headerBackground and I passed a react component to it and it works, but its not the case for bottomTab.

I managed to make it work somehow by using tabBarComponent so the image renders ok, but the problem is that my tabs disappear.

Is there a proper way to set a background image to tabNavigator ?

Here is my current tabNavigator code:

 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}/>

Just make the component and create the Icon or Text in and render it. Under component u can navigate to other screen by this.props.navigation.navigate('desirescreen-route');