我目前正在学习本地反应。我想使用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>
);
}
}
这是另一个具有相同问题的示例。
答案 0 :(得分：1)
替换
onPress={ this.moveToStepTwo }
使用
onPress={()=> this.moveToStepTwo() }
答案 1 :(得分：1)
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 => {
// ...
})
答案 2 :(得分：0)
我假设您已经安装了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 !!!!');
}