Блог

У меня это есть в моем react-native коде:

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

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

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

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

Вам нужно внести некоторые изменения в 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
  }
});
  

Добавьте его с 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 
  

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

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