Question

我在Stack导航器中使用了一个TabNavigator。 Stack Navigator在TabNavigator内包含2页Tab Navigator页面和AddCar页面，我使用的是Custom Tab Bar Component，当我按下该按钮时，它使用的是自定义Button组件，而不是路由到Add Car Page，

我试图启动也位于tabNavigator中的页面，但无法正常工作

这是堆栈导航器代码：

import React, { Component } from 'react';
import { View, Text, StyleSheet } from 'react-native';
import { createAppContainer, createStackNavigator } from 'react-navigation';

//Screens
import MainTabs from '../navigators/mainTabNavigator';
import AddCar from '../add_car/container/addCar';

class Navigator extends Component {
    render() {
        return (
            <AppNavigator />
        );
    }
}

const navigator = createStackNavigator({
    MainTabs: { screen: MainTabs },
    AddCar: { screen: AddCar }
}, {
    initialRouteName: 'MainTabs',
    headerMode: 'none'
});

const AppNavigator = createAppContainer(navigator);

export default Navigator;

这是tabNavigator：

/* eslint-disable no-undef */
/* eslint-disable max-len */
/* eslint-disable no-unused-expressions */
/* eslint-disable react/require-extension */
import React, { Component } from 'react';
import { StyleSheet } from 'react-native';
import { createAppContainer, createBottomTabNavigator, withNavigation, NavigationActions, getActiveChildNavigationOptions } from 'react-navigation';
import Icons from 'react-native-vector-icons/Ionicons';

import { OpacityButton } from '../utilities/buttons';
import Colors from '../Metrics/colors';

//Screens
import CarsList from '../cars_list/container/carsList';
import AddCar from '../add_car/container/addCar';
import Screen from '../screen';

class MainTabNavigator extends Component {
    render() {
        return (
            <AppContainer />
        );
    }
}
const size = 25;
const routeConfigs = {
    CarsList: {
        screen: CarsList,
        navigationOptions: () => ({
            tabBarIcon: ({ tintColor }) => (
                <Icons
                  name="ios-information-circle"
                  color={tintColor}
                  size={size}
                />
            ),
        }),
    },
    AppovedList: {
        screen: Screen,
        navigationOptions: () => ({
            tabBarIcon: ({ tintColor }) => (
                <Icons
                  name="ios-options"
                  color={tintColor}
                  size={size}
                />
            ),
        }),
    },
    AddCars: {
        screen: AddCar,
        navigationOptions: () => ({
            tabBarButtonComponent: () => (
                <OpacityButton 
                name="ios-add-circle-outline" 
                onPress={() => NavigationActions.navigate('addCar')} 
                size={size} 
                color={Colors.brandColor}
                containerStyle={{ borderWidth: StyleSheet.hairlineWidth, borderColor: Colors.light, backgroundColor: Colors.white }}
                />
            )
        })
    },
    NavList: {
        screen: CarsList,
        navigationOptions: () => ({
            tabBarIcon: ({ tintColor }) => (
                <Icons
                  name="ios-albums"
                  color={tintColor}
                  size={size}
                />
            ),
        }),
    },
    Profile: {
        screen: CarsList,
        navigationOptions: () => ({
            tabBarIcon: ({ tintColor }) => (
                <Icons
                  name="ios-contact"
                  color={tintColor}
                  size={size}
                />
            ),
        }),
    },
};

const navigationOptions = {
    tabBarOptions: {
        activeTintColor: Colors.brandColor,
        inactiveTintColor: Colors.lightBlack,
        showLabel: false,
        animation: true
    },
    headerMode: 'none'
};

const navigator = createBottomTabNavigator(routeConfigs, navigationOptions);

const AppContainer = createAppContainer(navigator);

export default MainTabNavigator;

我要导航到stacknavigator中的AddCarPage，请按该“自定义标签”组件按钮，像instagram加号图标会打开新页面。

Answer 1

对于自定义组件，您可以在tabBarIcon

下对其进行调用

AddCars: {
        screen: AddCar,
        navigationOptions: () => ({
            tabBarIcon:
                <OpacityButton 
                name="ios-add-circle-outline" 
                size={size} 
                color={Colors.brandColor}
                containerStyle={{ borderWidth: StyleSheet.hairlineWidth, borderColor: Colors.light, backgroundColor: Colors.white }}
                />
        })
    },

TabNavigator CustomTabComponent onPress无法导航到AddCar页面

1 个答案: