Question

我正在设置一条新路线，并希望支持建立新路线。我该怎么办？

我的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}>
        <TextInput
          style={styles.inputBox}
          placeholder="Name"
          placeholderTextColor="#4d82cb"
        />
        <Text onPress={() => this.props.navigation.navigate("Login")}>
          Have account? Login
        </Text>
      </View>
    );
  }
}

Answer 1

使用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;

Answer 2

您可以使用反应堆本机路由器通量进行导航

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

如何创建React Native导航路线？

2 个答案: