TabNavigator CustomTabComponent onPress 未导航到 AddCar 页面

Posted 2023-03-15

【中文标题】TabNavigator CustomTabComponent onPress 未导航到 AddCar 页面

【英文标题】：TabNavigator CustomTabComponent onPress not navigating to AddCar page

【发布时间】：2019-07-10 05:49:50

【问题描述】：

我在 Stack navigator 中使用 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 加号图标会打开新页面。

【问题讨论】：

您是否出于某种原因在堆栈和选项卡中都定义了 AddCar？

【参考方案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 
                />
        )
    ,

【讨论】：

但我没有在标签页中打开 addcar 页面，我希望它在新页面中

等等，所以你想要它在 StackNavigator 下？而不是底部标签？