Блог

Я настраиваю новый маршрут и хочу поддержать создание новых маршрутов. Что я могу сделать?

Мой AppNavigator.js — Маршруты указаны здесь

 import { createStackNavigator, createAppContainer } from "react-navigation";
import Login from "../client/components/auth/Login";
import Register from "../client/components/auth/Register";

const AppNavigator = createStackNavigator({
  Login: { screen: Login },
  Register: { screen: Register }
});

const App = createAppContainer(AppNavigator);

export default App;
 

В App.js , я только что импортировал AppNavigator

Register.js — Я пытаюсь проложить маршрут для входа в систему

 import React from "react";
import {
  StyleSheet,
  Text,
  View,
  TextInput,
  Button,
  TouchableOpacity
} from "react-native";
import PropTypes from "prop-types";

export default class Register extends React.Component {
  render() {
    return (
      <View style={styles.container}>
        <Text onPress={() => this.props.navigation.navigate("Login")}>
          Have account? Login
        </Text>
      </View>
    );
  }
}
 

Создайте новый стек с createStackNavigator помощью . Насколько я понимаю, вы хотите перенаправить на другой маршрут после входа в систему. Для этого вам нужно их добавить createSwitchNavigator . Затем после успешного входа в систему вы перенаправите свой маршрут, например, настройки, и для успешного входа в систему вы сохраните токен Asyncstorage . Итак, каждый раз, когда вы загружаете приложение, если вы успешно вошли в систему, вы будете автоматически перенаправлены на страницу настроек, в противном случае будет загружена страница регистрации.

Здесь код для App.js

App.js

 import { createStackNavigator, createAppContainer,createSwitchNavigator } from "react-navigation";
import Login from "../client/components/auth/Login";
import Register from "../client/components/auth/Register";
import Setting from "../client/components/auth/Setting";
class AuthLoadingScreen extends React.PureComponent {
    constructor(props) {
        super(props);
        this._bootstrapAsync();

    }
  async _getStoredDataFromAsync(key) {
        return await AsyncStorage.getItem(key);
    }
 _bootstrapAsync = async () => {
        const userToken = await this._getStoredDataFromAsync("userToken");
        this.props.navigation.navigate(userToken ? 'App' : 'Some');
    };
 render() {
        return (

            <View style={{flex:1}}>
                <ActivityIndicator />


            </View>

        );
    }


}
const AppNavigator = createStackNavigator({
  Login: { screen: Login },
  Register: { screen: Register }
});
const SomeNavigator = createStackNavigator({
  Setting: { screen: Setting},

});
const Navigation = createSwitchNavigator(
    {
        AuthLoading: AuthLoadingScreen,
        App: AppNavigator ,
        Some: SomeNavigator ,



    },
 {
        initialRouteName: 'AuthLoading',
});
const App = createAppContainer(Navigation );

export default App;
 

для навигации можно использовать поток маршрутизатора с использованием react-native

https://www.npmjs.com/package/react-native-router-flux