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

只需制作组件并在其中创建图标或文本并进行渲染。在组件u下，可以通过this.props.navigation.navigate('desirescreen-route');

导航到其他屏幕

底部标签导航器背景图片

1 个答案: