react-native - 无法读取属性导航未定义
问题描述
我想在登录后重定向到另一个页面。
应用程序.js
import React, {Component} from 'react';
import {Platform, StyleSheet, Text, View} from 'react-native';
import { createStackNavigator, createAppContainer } from 'react-navigation';
import Login from './app/components/Login';
import Home from './app/components/Home';
global.MyVar = 'https://aboutreact.com';
const NavStack = createStackNavigator({
Login:{
screen:Login,
navigationOptions: {
header: null,
}
},
Home:{
screen:Home,
navigationOptions: {
header: null,
}
}
});
const Application = createAppContainer(NavStack);
export default class App extends React.Component {
render() {
return (
<Application/>
);
}
}
登录.js
import React, {Component} from 'react';
import Icon from 'react-native-vector-icons/FontAwesome';
import {Platform, StyleSheet, Text, View, Image} from 'react-native';
import { Button, ThemeProvider, Input } from 'react-native-elements';
import axios from 'axios';
export default class Login extends React.Component {
constructor(props){
super(props);
this.buttonPress = this.buttonPress.bind(this);
this.state = {
user: '',
password:'',
};
}
buttonPress() {
axios.get('https://reqres.in/api/products/3')
.then(function (response) {
// return console.log(response.data.data.id);
// return console.log(global.MyVar);
this.props.navigation.navigate('Home');
})
.catch(function (error) {
return console.log(error);
});
}
// loginSubmit = ()=>{
// axios.get('https://reqres.in/api/products/3')
// .then(function (response) {
// // return console.log(response.data.data.id);
// // return console.log(global.MyVar);
// const { navigate } = this.props.navigation;
// navigate('Home', { user: 'John' })
// })
// .catch(function (error) {
// return console.log(error);
// });
// }
render() {
return (
<View style={styles.container}>
<View style={styles.loginform}>
<Image style={styles.logo} source={require('../images/emllogo.png')} />
<View style={styles.formarea}>
<Input
onChangeText={(user)=>this.setState({user})}
style={styles.inputtext}
placeholder='User Name f'
leftIcon={
<Icon
name='user'
size={20}
/>
}
/>
</View>
<View style={styles.formarea}>
<Input
secureTextEntry={true}
onChangeText={(password)=>this.setState({password})}
style={styles.inputtext}
placeholder='Password'
leftIcon={
<Icon
name='lock'
size={20}
/>
}
/>
</View>
<View style={styles.formarea}>
<Button
buttonStyle={{
backgroundColor:'red'
}}
title="Login"
onPress={this.buttonPress}
/>
</View>
</View>
</View>
);
}
}
const styles = StyleSheet.create({
container:{
flex:1,
backgroundColor:'#f00',
justifyContent:'center',
alignItems: 'center'
},
loginform:{
width:'80%',
minHeight:'50%',
borderWidth:0.5,
backgroundColor:'#fff',
color:'#000',
borderRadius:10,
alignItems: 'center'
},
logo:{
marginTop:'8%'
},
bordertopgray:{
borderTopColor:'#ccc',
borderTopWidth:0.5,
width:'100%'
},
formarea:{
width:'80%',
height:'8%',
marginTop:20
}
});
错误:
TypeError:无法读取 I:\XAMPP\htdocs\react\EMLV5\app\components\Login.js:17 at tryCallOne 处未定义的属性“导航”(I:\XAMPP\htdocs\react\EMLV5\node_modules\promise\setimmediate \core.js:37) 在 I:\XAMPP\htdocs\react\EMLV5\node_modules\promise\setimmediate\core.js:123 在 I:\XAMPP\htdocs\react\EMLV5\node_modules\react-native\Libraries\ Core\Timers\JSTimers.js:298 at _callTimer (I:\XAMPP\htdocs\react\EMLV5\node_modules\react-native\Libraries\Core\Timers\JSTimers.js:152) at _callImmediatesPass (I:\XAMPP\htdocs \react\EMLV5\node_modules\react-native\Libraries\Core\Timers\JSTimers.js:200) 在 Object.callImmedates (I:\XAMPP\htdocs\react\EMLV5\node_modules\react-native\Libraries\Core\Timers \JSTimers.js:473) 在 MessageQueue。__callImmediates (I:\XAMPP\htdocs\react\EMLV5\node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:337) 在 I:\XAMPP\htdocs\react\EMLV5\node_modules\react-native\Libraries\BatchedBridge \MessageQueue.js:135 在 MessageQueue.__guard (I:\XAMPP\htdocs\react\EMLV5\node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:314)
解决方案
您的问题是您使用function () {}
的是数组函数而不是数组函数() => {}
,并且您得到的this
是函数的而不是this
类的。
export default class Login extends React.Component {
constructor(props){
super(props);
this.buttonPress = this.buttonPress.bind(this);
this.state = {
user: '',
password:'',
};
}
buttonPress() {
axios.get('https://reqres.in/api/products/3')
.then(response => { // arrow function
// return console.log(response.data.data.id);
// return console.log(global.MyVar);
this.props.navigation.navigate('Home');
})
.catch(function (error) {
return console.log(error);
});
}
// loginSubmit = ()=>{
// axios.get('https://reqres.in/api/products/3')
// .then(response => { // arrow function
// // return console.log(response.data.data.id);
// // return console.log(global.MyVar);
// const { navigate } = this.props.navigation;
// navigate('Home', { user: 'John' })
// })
// .catch(function (error) {
// return console.log(error);
// });
// }
推荐阅读
- c# - 如何检测后退按钮单击并使webview返回
- r - 闪亮的将用户输入保存到谷歌表格
- ios - iOS - Firebase 存储尝试在 didFinishLaunchingWithOptions 之前初始化
- c# - ASP.NET core 2.1 本地化标识 url
- python - 如何使用 Python 生成 100 个大学课程百分比的圆环图?
- angular - Ng-Zorro 你来了
- mongodb - 根据MongoDb中的字段组合对象数组
- ios - 声音文件在模拟器中工作正常,但在 iPhone 中不起作用
- javascript - 什么是 C++ std::unordered_map 的等价物
在 Javascript 中? - javascript - 如何将 parentNode.id 作为参数传递给 querySelector 之外的元素