javascript - TabNavigator CustomTabComponent onPress 未导航到 AddCar 页面

Question

我在堆栈导航器中使用了一个 TabNavigator。Stack Navigator 包含 2 个页面 Tab Navigator 页面和 AddCar 页面，在 TabNavigator 内我正在使用自定义选项卡栏组件，当我按下该按钮时它使用自定义按钮组件，它不会路由到添加汽车页面，

我也尝试启动 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;

我想导航到堆栈导航器中的 AddCarPage，按下该自定义选项卡组件按钮，就像 instagram 加号图标打开新页面一样。

标签： javascriptreact-nativereact-navigation

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