我创建了3个组件。 1)登录屏幕2)VenueList屏幕3)菜单屏幕 我创建了另一个名为AuthLoading的组件,该组件将用户从登录屏幕导航到VenueList屏幕。 AuthLoading是连接登录前组件和登录后组件的桥梁组件。
登录屏幕上有一个按钮,onclick将触发loginAction.js,并且用户被导航到Web浏览器,在此他输入电子邮件/密码。收到accessToken后,必须将用户导航到VenueList屏幕,但switchNavigator不起作用。我该如何实施?
Login.js:
import React, { Component } from 'react';
import { Button, StyleSheet, View } from 'react-native';
import { connect } from 'react-redux';
import { loginUser } from '../actions/loginAction';
class Login extends Component {
_signInAsync = async () => {
await AsyncStorage.setItem('accessToken', this.props.accessToken);
this.props.navigation.navigate('App');
}
render() {
console.log(this.props.accessToken);
return (
<View style={styles.container}>
<Button
onPress={this.props.loginUser}
title="Click to Login"
></Button>
</View>
);
}
}
loginAction.js:
import { LOGIN_USER } from './types';
import Auth0 from 'react-native-auth0';
var credentials = require('./auth0-credentials');
const auth0 = new Auth0(credentials);
export const loginUser = () => dispatch => {
auth0.webAuth
.authorize({
scope: 'openid profile',
audience: 'https://' + credentials.domain + '/userinfo'
})
.then(credentials =>
dispatch({
type: LOGIN_USER,
payload: credentials.accessToken
})
)
.catch(error => console.log(error));
};
authLoading.js:
import React, { Component } from 'react';
import { StyleSheet, View, ActivityIndicator, AsyncStorage, StatusBar } from 'react-native';
export default class AuthLoading extends Component {
constructor() {
super();
this._bootstrapAsync();
}
_bootstrapAsync = async () => {
const accessToken = await AsyncStorage.getItem('accessToken');
// This will switch to the App screen or Auth screen and this loading
// screen will be unmounted and thrown away.
this.props.navigation.navigate(accessToken ? 'App' : 'Auth');
};
render() {
return (
<View style={styles.container}>
<ActivityIndicator />
<StatusBar barStyle="default" />
</View>
);
}
}
app.js:
const AppStack = createStackNavigator({ Venues: VenueList, Menu: ItemsMenu });
const AuthStack = createStackNavigator({ Login: Login });
const AppStackNavigator = createSwitchNavigator(
{
AuthLoading: AuthLoadingScreen,
App: AppStack,
Auth: AuthStack,
},
{
initialRouteName: 'AuthLoading',
}
);
屏幕截图:
在上面的屏幕截图中,在收到accessToken之后,用户再次导航回登录屏幕,但我不想将用户导航到VenueList屏幕。
答案 0 :(得分:1)
您可以检查accessToken
组件中的渲染功能开始时是否设置了Login
,并在登录后将用户导航到VenueList
屏幕。
class Login extends Component {
_signInAsync = async () => {
await AsyncStorage.setItem('accessToken', this.props.accessToken);
this.props.navigation.navigate('App');
}
render() {
if(this.props.accessToken) {
this.props.navigation.navigate('VenueList')
}
return (
<View style={styles.container}>
<Button
onPress={this.props.loginUser}
title="Click to Login"
></Button>
</View>
);
}
}
答案 1 :(得分:1)
您不应在渲染中导航。在componentDidMount()
或componetDidUpdate()
class Login extends Component {
_signInAsync = async () => {
await AsyncStorage.setItem('accessToken', this.props.accessToken);
this.props.navigation.navigate('App');
}
componentDidMount(){
if(this.props.accessToken) {
this.props.navigation.navigate('VenueList')
}
}
render() {
return (
<View style={styles.container}>
<Button
onPress={this.props.loginUser}
title="Click to Login"
></Button>
</View>
);
}
}