Как перейти с одного экрана на другой в реакции на родной выставочный проект? - PullRequest
Новая
       9

Как перейти с одного экрана на другой в реакции на родной выставочный проект?

0 голосов
/ 22 февраля 2019

Я создал приложение, используя React native expo, где у меня есть два экрана - Splash & Login.Таким образом, после появления экрана Splash в течение 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 response-navigation

А затем последовал документирование родной экспозиции React- https://docs.expo.io/versions/latest/react-native/navigation/

Но ни один из них не работал согласно плану.Итак, мне просто нужно одно простое решение, чтобы перейти от экрана входа в систему к экрану заставки нажатием кнопки «Вход».Было бы очень хорошо, если бы кто-нибудь помог мне с этим.

Ответы [ 2 ]

0 голосов
/ 23 февраля 2019

Вы можете использовать react-navigation для перехода от экрана Splash к логину и обратно.

Я внес некоторые изменения в ваш код.

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

0 голосов
/ 22 февраля 2019

Изменить код App.js.у вас уже установлена ​​реагирующая навигация.App.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();
...