react native expo项目中如何从一个屏幕转到另一个屏幕？

Posted 2023-03-15

【中文标题】react native expo项目中如何从一个屏幕转到另一个屏幕？

【英文标题】：How to go from one screen to another in react native expo project?

【发布时间】：2019-02-22 17:03:46

【问题描述】：

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

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

npm install --save react-navigation

然后跟着 React native expo 文档- https://docs.expo.io/versions/latest/react-native/navigation/

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

【参考方案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

【讨论】：

非常感谢您的评论。但是你可以看到我已经将我的类分隔在不同的 js 文件中，我只能从一个 js 文件中导出一个默认值。那么，有没有办法通过分离不同 js 文件（App.js、Login.js、Splash.js）中的类来做到这一点？

是的，使用相同的代码，放在不同的js文件中即可。

这行得通。我做的和你提到的完全一样。但是现在出现了一个问题，我可以在我的应用程序中看到一个工具栏，并且在登录屏幕中，该工具栏中有一个左箭头按钮。单击后，我可以转到启动画面。但有趣的是，按下 SIGN IN 按钮不起作用。

【参考方案2】：

更改 App.js 的代码。你已经安装了反应导航。 应用.js：

import  StyleSheet, Text, View  from 'react-native';
import createStackNavigator from 'react-navigation';
import store from './src/store';
import Provider from 'react-redux';
import SplashScreen from './src/Splash';
import LoginScreen from './src/Login';
const App = createStackNavigator(
  Splash:  screen: SplashScreen ,
  Login:  screen: LoginScreen ,
);
export default App;
On Login screen sign button onPress :
this.props.navigation.goBack();

【讨论】：

请添加一些有关此代码的作用以及它如何解决问题的详细信息，它使答案更有用

按照您的说明操作后，它显示以下错误：不变违规：此导航器缺少导航道具。在 react-navigation 3 中，您必须直接设置您的应用容器。

我正在使用另外一个库“react-navigation-helper”。请安装，然后它会工作。 npm insall --save react-navigation-helper

更多详情：github.com/dayitv89/react-navigation-helper#readme