底部标签导航器背景图像

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');