Как перейти на страницу реагировать на родную, которой нет во вкладке навигатора?

Question

У меня есть это в моем реактивном коде:

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

но я хочу перейти на вкладку «Упражнение» только тогда, когда щелкну по ней на странице списка упражнений, например:

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

и я не хочу, чтобы он отображался на панели навигации внизу. Но если я удаляю его из MainNavigator и выше, он не работает, когда я нажимаю на onPress выше. Есть ли способ перейти к компоненту, если он не находится на вкладке nav?

Answer 1

вот два метода вызова других компонентов, которые не содержатся в 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 

обратите внимание на последнюю строку .... !!!!

надеюсь быть полезным.

Answer 2

Вам нужно внести некоторые изменения в app.js.добавить createBottomTabNavigator внутри createStackNavigator.Добавьте те компоненты в 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
  }
});

Answer 3

Добавьте это с createSwitchNavigator. Рабочий пример приведен ниже

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


    },
    {
        initialRouteName: 'AuthLoading',
  }

Здесь я могу получить доступ к своей странице Qr из любого места.