javascript - 如何在 React Native Expo 项目中从一个屏幕转到另一个屏幕？

Question

我使用 React Native expo 创建了一个应用程序，其中有两个屏幕 - 启动画面和登录。因此，启动屏幕出现 3 秒后，将进入登录屏幕。现在，在登录屏幕中，我只想执行一项任务 - 通过单击“登录”按钮，我想将登录屏幕切换回启动屏幕。下面我提供了我的三个类的代码-

App.js

import React from 'react';
import { StyleSheet, Text, View } from 'react-native';

import store from './src/store';
import {Provider} from 'react-redux';
import Splash from './src/Splash';
import Login from './src/Login';

export default class App extends React.Component {

  constructor(props) {
    super(props);
    this.state ={currentScreen:'Splash'};
    console.log('Start doing some tasks for about 3 seconds')

    setTimeout( ()=> {
      console.log('Done some tasks for about 3 second')
      this.setState({currentScreen: 'Login'})
    } , 3000)

  }

  render() {

      const {currentScreen} = this.state;

      let mainScreen = currentScreen === 'Splash' ?
      <Splash/> : <Login/>

      return mainScreen

  }
}

Login.js

import React, {Component} from 'react';
import { StyleSheet, Text, View, Image, TouchableWithoutFeedback,
        StatusBar, TextInput, SafeAreaView, Keyboard, TouchableOpacity,
        KeyboardAvoidingView } from 'react-native';



 class Login extends Component {
  render() {
    return (
      <SafeAreaView style={styles.container}>
        <StatusBar barStyle="light-content"/>
        <KeyboardAvoidingView
          behavior = "padding"
          style={styles.container}
        >
        
        <TouchableWithoutFeedback
          style = {styles.container}
          onPress = {Keyboard.dismiss}
        >
        
        <View style = {styles.logoContainer}>

          <View style = {styles.logoContainer}>


            <Text style={styles.title}>
              Account Information
            </Text>
          </View>

          <View style={styles.infoContainer}>

            <TextInput
              style = {styles.input}
              placeholder = "Enter User name/Email"
              placeholderTextColor = 'rgba(255,255,255,0.8)'
              keyboardType = 'email-address'
              returnKeyType = 'next'
              autoCorrect= {false}
              onSubmitEditing = {() => this.refs.txtPassword.focus()}
            />

          <TextInput
              style = {styles.input}
              placeholder = "Enter Password"
              placeholderTextColor = 'rgba(255,255,255,0.8)'
              returnKeyType = 'go'
              autoCorrect= {false}
              ref = {"textPassword"}
          />

          <TouchableOpacity style={styles.buttonContainer}>

            <Text style={styles.buttonText}>SIGN IN</Text>

          </TouchableOpacity>

          </View>

          </View>

        </TouchableWithoutFeedback>
        
        </KeyboardAvoidingView>
      </SafeAreaView>
    );
  }
}

export default Login;

Splash.js

import React, {Component} from 'react';
import { StyleSheet, Text, View } from 'react-native';



 class Splash extends Component {
  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.title}>Hello Splash</Text>
      </View>
    );
  }
}

export default Splash;

然后我刚刚使用以下命令安装了 react 导航-

npm install --save react 导航

然后遵循 React Native expo 文档 - https://docs.expo.io/versions/latest/react-native/navigation/

但是他们都没有按照计划工作。因此，我只需要一种简单的解决方案，通过按下登录按钮从登录屏幕转到启动屏幕。如果有人能帮助我解决这个问题，那就太好了。

Answer 1

您可以使用 react-navigation 从启动屏幕导航到登录并返回。

我对您的代码进行了一些更改。

App.js

import React from "react";
import { createStackNavigator, createAppContainer } from "react-navigation";
import SplashScreen from "./Splash";
import Login from "./Login";

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

export default createAppContainer(AppNavigator);

Splash.js

import React, { Component } from "react";
import { StyleSheet, Text, View } from "react-native";

class Splash extends Component {
  constructor(props) {
    super(props);

    setTimeout(() => {
      props.navigation.navigate("Login");
    }, 3000);
  }

  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.title}>Hello Splash</Text>
      </View>
    );
  }
}

export default Splash;

Login.js

import React, { Component } from "react";
import {
  StyleSheet,
  Text,
  View,
  Image,
  TouchableWithoutFeedback,
  StatusBar,
  TextInput,
  SafeAreaView,
  Keyboard,
  TouchableOpacity,
  KeyboardAvoidingView
} from "react-native";

class Login extends Component {
  render() {
    const { navigation } = this.props;

    return (
      <SafeAreaView style={styles.container}>
        <StatusBar barStyle="light-content" />
        <KeyboardAvoidingView behavior="padding" style={styles.container}>
          <TouchableWithoutFeedback
            style={styles.container}
            onPress={Keyboard.dismiss}
          >
            <View style={styles.logoContainer}>
              <View style={styles.logoContainer}>
                <Text style={styles.title}>Account Information</Text>
              </View>

              <View style={styles.infoContainer}>
                <TextInput
                  style={styles.input}
                  placeholder="Enter User name/Email"
                  placeholderTextColor="rgba(255,255,255,0.8)"
                  keyboardType="email-address"
                  returnKeyType="next"
                  autoCorrect={false}
                  onSubmitEditing={() => this.refs.txtPassword.focus()}
                />

                <TextInput
                  style={styles.input}
                  placeholder="Enter Password"
                  placeholderTextColor="rgba(255,255,255,0.8)"
                  returnKeyType="go"
                  autoCorrect={false}
                  ref={"textPassword"}
                />

                <TouchableOpacity style={styles.buttonContainer} onPress={() => navigation.navigate("SplashScreen")}>
                  <Text style={styles.buttonText}>SIGN IN</Text>
                </TouchableOpacity>
              </View>
            </View>
          </TouchableWithoutFeedback>
        </KeyboardAvoidingView>
      </SafeAreaView>
    );
  }
}

export default Login;

此外，我建议阅读 react-navigation 的文档。那里给出的例子很简单。

https://reactnavigation.org/docs/en/hello-react-navigation.html