Question

我目前正在学习本地反应。我想使用Navigation（）函数从一个屏幕导航到另一个屏幕。导航功能位于fetch（）函数内部，因此，当我从服务器获得响应后，应将我重定向到下一页。但是目前我有一个问题，因为如果我把它放在fetch（）中，导航代码将无法正常工作。如果我删除了代码并将其放置在访存之外，那么它将起作用。

下面是我的书面代码（StepOne）：

import React, { Component } from 'react';
import { Text, View, StyleSheet, ImageBackground, TextInput, TouchableOpacity, Alert } from 'react-native';
import { Tile } from 'react-native-elements';


export default class StepOne extends Component {

  static navigationOptions = {
    header: null
  };


  constructor(props) {

    super(props);
    this.state = {
      userEmail : '',
      userPhone : ''
    }

  }

  moveToStepTwo = () => {

      const {userEmail} = this.state;
      const {userPhone} = this.state;

      if(userEmail == '' || userPhone == '') {

        Alert.alert('Warning' , 'Please Insert All the Required Details !!!!');

      } else {

                    let url = 'registerProcessGetEmailValidity.jsp?';
      let param_one = 'user_email='+userEmail;

      let seperator_param = '&';
      let full_url = ''; 
      full_url = url + param_one;

      let header = {
          'Accept': 'application/json',
          'Content-Type': 'application/json'
      };


      fetch( full_url, {
        method: 'GET',
        headers: header,
      })        
      .then(function(response) {
          return response.json();
      })
      .then(function(myJson) {
          console.log(myJson);

          if(myJson.message == 'No User') {

             this.props.navigation.navigate('StepTwo', { userEmail: this.state.userEmail , userPhone: this.state.userPhone } );

          } else if (myJson.message == 'Got User') {

              Alert.alert('Warning' , 'Email is registered, Choose different email !!!!');

          } 

      });

      }

  }


  render() {

    const { navigate } = this.props.navigation;

    return (

        <View style={styles.container}>
            <ImageBackground source={require('../../img/background1.jpg')} style={styles.backgroundImage}>
                <View style={styles.content}>

                    <Text style={styles.logo}> -- STEP 1 -- </Text>

                    <View style={styles.inputContainer}>
                        <TextInput 
                              underlineColorAndroid='transparent' style={styles.input} placeholder='ENTER EMAIL'
                              onChangeText = {userEmail => this.setState({userEmail})} >
                        </TextInput>
                        <TextInput 
                              underlineColorAndroid='transparent' keyboardType = {'numeric'}  maxLength={12} 
                              style={styles.input} placeholder='ENTER PHONE NUMBER' onChangeText = {userPhone => this.setState({userPhone})} >
                        </TextInput> 
                    </View>

                    <View style={styles.buttonHolder}>
                        <TouchableOpacity style={styles.buttonContainer} onPress={ this.moveToStepTwo }>
                            <Text style={styles.buttonText}>NEXT</Text>
                        </TouchableOpacity>
                        <TouchableOpacity  style={styles.buttonContainer} onPress={ ()=> navigate('Home') } >
                            <Text style={styles.buttonText}>CANCEL</Text>
                        </TouchableOpacity>
                    </View>

                </View>
            </ImageBackground>
        </View>

    );

  }


}

在获取调用后导航至“ StepTwo”屏幕时，没有任何响应。我无法导航到下一个屏幕。就像提取中的导航调用不起作用。谁能帮助我解决这个问题？

还有一件事。我的代码有什么错误吗？由于我是新来的人，所以我不知道我在写什么是正确的。也许关于这个。某些元素。

我再举一个例子（App.js）：

import React from 'react';
import { StyleSheet, Text, View, TouchableOpacity } from 'react-native';
import { StackNavigator } from 'react-navigation';
import Expo from 'expo';


import HomeScreen from './app/screens/HomeScreen';
import LoginScreen from './app/screens/LoginScreen';
import RegisterScreen from './app/screens/RegisterScreen';

const NavigationApp = StackNavigator({
 Home: { screen: HomeScreen },
 Login: { screen: LoginScreen },
 Register: { screen: RegisterScreen },
});


export default class App extends React.Component {

  render() {

    return (
        <NavigationApp />
    );

  }

}

然后登录文件（Login.js）

import React, { Component } from 'react';
import { Text, View, StyleSheet, ImageBackground, TextInput, TouchableOpacity, Alert } from 'react-native';
import { FormLabel, FormInput } from 'react-native-elements'

export default class Login extends Component {

  static navigationOptions = {
    header: null
  };

  constructor(props) {

    super(props);
    this.state = {
      userName : '',
      userPass : ''
    }

  }


  login = () => {

      const {userName} = this.state;
      const {userPass} = this.state;

      if(userName == '' || userPass == '') {

        Alert.alert('Warning' , 'Please Insert All the Required Details !!!!');

      } else {


          let url = 'loginProcessGetUserDetails.jsp?';
          let param_one = 'user_name='+userName;
          let param_two = 'user_pass='+userPass;
          let param_three = 'user_group=JOMLOKA';
          let seperator_param = '&';
          let full_url = ''; 
          full_url = url + param_one + seperator_param + param_two + seperator_param + param_three;

          let header = {
              'Accept': 'application/json',
              'Content-Type': 'application/json'
          };


          fetch( full_url, {
            method: 'GET',
            headers: header,
          })        
          .then(function(response) {
              return response.json();
          })
          .then(function(myJson) {
              console.log(myJson);

              if(myJson.message == 'No User') {
                  Alert.alert('Warning' , 'No User !!!!');
              } else if (myJson.message == 'Wrong Password') {
                  Alert.alert('Warning' , 'Wrong Password !!!!');
              } else if (myJson.message == 'Login') {
                  //Alert.alert('Success' , 'Login !!!!');
                  const { navigate } = this.props.navigation;
                  navigate("Register",{ userEmail: this.state.userEmail , userPhone: this.state.userPhone });
              }

          });


      }

  }



  render() {

    const { navigate } = this.props.navigation;

    return (
        <View style={styles.container}>

            <ImageBackground source={require('../img/background1.jpg')} style={styles.backgroundImage}>
                <View style={styles.content}>

                    <Text style={styles.logo}> -- LOGIN DEMO -- </Text>

                    <View style={styles.inputContainer}>
                        <TextInput underlineColorAndroid='transparent' style={styles.input} placeholder='ENTER USERNAME' onChangeText = {userName => this.setState({userName})} >
                        </TextInput>
                        <TextInput underlineColorAndroid='transparent' secureTextEntry={true} style={styles.input} placeholder='ENTER PASSWORD' onChangeText = {userPass => this.setState({userPass})} >
                        </TextInput> 
                    </View>


                    <View style={styles.buttonHolder}>
                        <TouchableOpacity onPress={this.login} style={styles.buttonContainer}>
                            <Text style={styles.buttonText}>LOGIN</Text>
                        </TouchableOpacity>
                        <TouchableOpacity onPress={ ()=> navigate('Home') }  style={styles.buttonContainer}>
                            <Text style={styles.buttonText}>CANCEL</Text>
                        </TouchableOpacity>
                    </View>

                </View>
            </ImageBackground>

        </View>
    );

  }


}

这是另一个具有相同问题的示例。

Answer 1

替换

onPress={ this.moveToStepTwo }

使用

onPress={()=> this.moveToStepTwo() }

Answer 2

this.props.navigation.navigate('StepTwo', { userEmail: this.state.userEmail , userPhone: this.state.userPhone } );

您确定您的this是正确的吗？

如果您不使用箭头功能，则需要先执行var _this = this，然后执行_this.props.navigation.navigate('StepTwo', { userEmail: this.state.userEmail , userPhone: this.state.userPhone } );

您可以在提取中使用Arrow函数：

fetch(url, options)
  .then(response => {
    // ...
  })
  .catch(error => {
    // ...
  })

Answer 3

我假设您已经安装了react-navigation插件。

现在将文件导入app.js

如下所示：

import login from './login';
import StepTwo from './StepTwo';

const Nav = StackNavigator({
    login : {screen: login},
    StepTwo : {screen: StepTwo},
});

export default class FApp extends Component {
  render() {
    return (
      <Nav/>
    );
  }
}

并在您的login文件中。（将此文件视为登录文件）

if(myJson.message == 'No User') {
    const { navigate } = this.props.navigation;
    navigate("StepTwo",{ userEmail: this.state.userEmail , userPhone: this.state.userPhone });
} else if (myJson.message == 'Got User') {
    Alert.alert('Warning' , 'Email is registered, Choose different email !!!!');
}

使用导航在本机中从一页导航到另一页

3 个答案: