我正在使用react-native-router-flux构建一个React Native项目,并且我在导航方面遇到了一些麻烦。基本上,我正在建立一个登录页面,用于检查数据库中的电子邮件/密码,并在匹配时存储访问令牌。然后我想立即从登录页面导航到主页,但我不知道如何实现。似乎{Actions.SceneKey}只有在它的onPress上才有效。这是我的登录页面代码:
'use strict'
import React, { Component } from 'react';
import { AsyncStorage, StyleSheet, Text, View, TouchableHighlight, AlertIOS,} from 'react-native';
import { Actions } from 'react-native-router-flux'
import t from 'tcomb-form-native'
import ViewContainer from '../components/ViewContainer';
import StatusBarBackground from '../components/StatusBarBackground';
var STORAGE_KEY = 'access_token';
var Form = t.form.Form;
var Person = t.struct({
email: t.String,
password: t.String
});
const options = {};
var LoginIndexScreen = React.createClass({
async _onValueChange(item, selectedValue) {
try {
await AsyncStorage.setItem(item, selectedValue);
{Actions.HomeScreen}
} catch (error) {
console.log('AsyncStorage error: ' + error.message);
}
},
_userSignup() {
var value = this.refs.form.getValue();
if (value) { // if validation fails, value will be null
fetch("https://EXAMPLE.herokuapp.com/oauth/token", {
method: "POST",
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json'
},
body: JSON.stringify({
email: value.email,
password: value.password,
})
})
.then(console.log(response))
.then((response) => response.json())
.then((responseData) => {
this._onValueChange(STORAGE_KEY, responseData.id_token),
AlertIOS.alert(
"Signup Success!"
)
})
.done();
}
},
_userLogin() {
var value = this.refs.form.getValue();
if (value) { // if validation fails, value will be null
fetch("https://EXAMPLE.herokuapp.com/oauth/token", {
method: "POST",
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json'
},
body: JSON.stringify({
email: value.email,
password: value.password,
})
})
.then((response) => response.json())
.then((responseData) => {
if (responseData.access_token) {
console.log(responseData)
this._onValueChange(STORAGE_KEY, responseData.access_token)
{Actions.HomeScreen}
} else {
AlertIOS.alert(
"Login failed due to: " + responseData.message
)
}
})
.done();
}
},
render() {
return (
<View style={styles.container}>
<View style={styles.row}>
<Form
ref="form"
type={Person}
options={options}
/>
</View>
<View style={styles.row}>
<TouchableHighlight style={styles.button} onPress={this._userSignup} underlayColor='#99d9f4'>
<Text style={styles.buttonText}>Signup</Text>
</TouchableHighlight>
<TouchableHighlight style={styles.button} onPress={this._userLogin} underlayColor='#99d9f4'>
<Text style={styles.buttonText}>Login</Text>
</TouchableHighlight>
</View>
</View>
);
}
});
var styles = StyleSheet.create({
container: {
justifyContent: 'center',
marginTop: 50,
padding: 20,
backgroundColor: '#ffffff',
},
title: {
fontSize: 30,
alignSelf: 'center',
marginBottom: 30
},
buttonText: {
fontSize: 18,
color: 'white',
alignSelf: 'center'
},
button: {
height: 36,
backgroundColor: '#48BBEC',
borderColor: '#48BBEC',
borderWidth: 1,
borderRadius: 8,
marginBottom: 10,
alignSelf: 'stretch',
justifyContent: 'center'
},
});
module.exports = LoginIndexScreen;
&#13;
非常感谢任何帮助
答案 0 :(得分:0)
Actions.SceneKey
是Actions
上的方法。因此,您需要将其称为:Actions.SceneKey()
或Actions.HomeScreen()
。
当您将此方法放在onPress
上时onPress={Actions.HomeScreen}
,您将该方法作为道具发送给TouchableHighlight
,当您按下按钮时会调用该方法。
因此,您需要将if块中的方法调用为Actions.HomeScreen()