如何导航到不在选项卡导航器中的本机反应页面？

Posted 2021-05-03

我在我的react-native代码中有这个：

const MainNavigator = createBottomTabNavigator({
  Home: Home,
  "Exercise List": ExerciseList,
  Exercise: Exercise,
  "Current Workout": CurrentWorkout,
})

但是当我通过exerciseList页面点击它时，我只想导航到练习选项卡，如下所示：

onPress={() => navigate("Exercise", { name: item.name })}

我不希望它出现在底部的导航栏中。但是，如果我从上面的MainNavigator中删除它，那么当我单击上面的onPress时它不起作用。有没有办法导航到组件而不在选项卡导航中？

答案

添加createSwitchNavigator。下面给出一个工作实例

const Navigation = createSwitchNavigator(
    {
        AuthLoading: AuthLoadingScreen,
        App: AppStack,
        Auth: AuthStack,
        Qr: QrPage,


    },
    {
        initialRouteName: 'AuthLoading',
  }

在这里，我可以从任何地方访问我的Qr页面。

另一答案

这里是调用tabNavigator中不包含的其他组件的两种方法：

 const otherAppNavigator = createStackNavigator({//all of this are not in TabNavigator
dashboard: {
    screen: Dashboard,
},

userProfile: {
    screen: UserProfile
},

onGoingPickup: {
    screen: OnGoingPickup
},
 });

    const TabNavigator = createBottomTabNavigator({
    home: otherAppNavigator,//<<<<<<<<<<
    about:foo,

       }
    )

const MainNavigator = createSwitchNavigator({
    firstPage: {//it's not in TabNavigator<<<<<<<<<<<<<<<<<<<<<<<<<<
        screen: Login,
    },
    verification: {//its not in TabNavigator<<<<<<<<<<<<<<<<<<<<<<<<
        screen: verification
    },
    dashboard: {
        screen: TabNavigator
    }
})

export default createAppContainer(MainNavigator); //the main navigator is which you bind in here 

注意最后一行.... !!!!

希望对你有所帮助。

另一答案

你需要在app.js做一些改变。在createStackNavigator中添加createBottomTabNavigator。将这些组件添加到stacknavigator中，您不希望将其添加到底部选项卡导航器中。在createBottomTabNavigator中，添加要在选项卡栏中显示的组件

请检查以下代码

import React, { Component } from "react";
import {
  Platform,
  StyleSheet,
  Text,
  View,
  SafeAreaView,
  ScrollView,
  Dimensions
} from "react-native";
import { createStackNavigator, createBottomTabNavigator } from "react-navigation";
import LoginScreen from "./Screens/LoginScreen";
export default class App extends Component {
  render() {
    return <StackNav />;
  }
}
const StackNav = createStackNavigator(
  {
    TabNavigator: {
      screen: AppTabNavigator,
      navigationOptions: {
        headerMode: "none",
        header: null
      }
    },
    First: {
      screen: First,
      navigationOptions: {
        headerMode: "none",
        header: null
      }
    },
    Second: {
      screen: Second,
      navigationOptions: {
        headerMode: "none",
        header: null
      }
    }
  },
  {
    initialRouteName: "TabNavigator"
  }
);
const AppTabNavigator = createBottomTabNavigator({
  Login: {
    screen: LoginScreen
  }
});