javascript - 底部选项卡导航器背景图像

Question

我正在使用React Navigation 3. 目前我的bottomTabNavigator项目中有一个。我想为它设置背景图像或艺术。我的标题非常简单，因为我使用了一个名为的属性headerBackground并将一个反应组件传递给它并且它可以工作，但对于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);

标签： javascriptreact-nativereact-navigation

Answer 1

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

只需制作组件并在其中创建图标或文本并渲染它。在组件下，您可以通过以下方式导航到其他屏幕this.props.navigation.navigate('desirescreen-route');