TabNavigator CustomTabComponent onPress не переходить на страницу AddCar

Question

Я использую TabNavigator внутри стекового навигатора. Навигатор стека содержит страницу навигатора вкладок «2 страницы» и страницу 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;

вот вкладка Навигатор:

/* 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, который находится в stacknavigator, при нажатии этой кнопки компонента пользовательской вкладки, Как значок instagram plus открывает новую страницу.

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