我要在登录后重定向到另一个页面。
App.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/>
);
}
}
Login.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 在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 在_callTimer(I:\ XAMPP \ htdocs \ react \ EMLV5 \ node_modules \ react-native \ Libraries \ Core \ Timers \ JSTimers.js:152) 在_callImmediatesPass(I:\ XAMPP \ htdocs \ react \ EMLV5 \ node_modules \ react-native \ Libraries \ Core \ Timers \ JSTimers.js:200) 在Object.callImmediates(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)
答案 0 :(得分:0)
您的问题是您使用的是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);
// });
// }
答案 1 :(得分:0)
尝试
loginSubmit = ()=>{
const { navigate } = this.props.navigation;
axios.get('https://reqres.in/api/products/3')
.then(function (response) {
return console.log(response.data.data.id);
return console.log(global.MyVar);
navigate('Home', { user: 'John' })
})
.catch(function (error) {
return console.log(error);
});
}