我已经创建了3个组件。1) 登录屏幕2)VenueList屏幕3)菜单屏幕
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',
}
);
截图: