我正在尝试通过我的应用设置Auth流,但似乎无法完全弄清。这就是我想要的流程,但是如果您有任何对此有用的存储库,请告诉我:
标签:
屏幕:
搜索 验证流程:
router.js
import React from 'react';
import { Platform, StatusBar } from 'react-native';
import { createStackNavigator, createBottomTabNavigator, createSwitchNavigator } from 'react-navigation';
import { FontAwesome } from 'react-native-vector-icons';
import AuthLoadingScreen from '../screens/AuthLoadingScreen';
import LoginScreen from '../screens/LoginScreen';
import HomeScreen from '../screens/HomeScreen';
import SearchScreen from '../screens/SearchScreen';
export const UnauthenticatedStack = createStackNavigator({
AuthLoading: {
screen: AuthLoadingScreen,
navigationOptions: {
title: 'AuthLoading',
tabBarVisible: false,
header: null,
headerLeft: null,
headerRight: null,
},
},
Login: {
screen: LoginScreen,
navigationOptions: {
title: 'Login',
tabBarVisible: false,
header: null,
headerLeft: null,
},
},
});
export const AuthenticatedStack = createBottomTabNavigator(
{
Home: {
screen: HomeScreen,
navigationOptions: {
tabBarLabel: 'Home',
tabBarIcon: ({ tintColor }) => (
<FontAwesome name="home" size={24} color={tintColor} />
),
},
},
Search: {
screen: SearchScreen,
navigationOptions: {
tabBarLabel: 'Search',
tabBarIcon: ({ tintColor }) => (
<FontAwesome name="search" size={24} color={tintColor} />
),
},
},
},
);
export default createSwitchNavigator({
Home: AuthenticatedStack,
Login: UnauthenticatedStack,
},
{
initialRouteName: 'Home'
,
});
App.js
// Imports: Dependencies
import React from 'react';
import { View, StyleSheet } from 'react-native';
import firebase from 'firebase';
import { FirebaseAPIKey, authDomain, databaseURL, projectId, messagingSenderId } from './config/config';
import { UnauthenticatedStack, AuthenticatedStack } from './navigation/router';
// Firebase Config
export const firebaseConfig = {
apiKey: FirebaseAPIKey,
authDomain: `${authDomain}`,
databaseURL: `${databaseURL}`,
projectId: `${projectId}`,
// storageBucket: "",
messagingSenderId: `${messagingSenderId}`,
};
console.log(firebaseConfig)
// Initialize Firebase
firebase.initializeApp(firebaseConfig);
// React Native: Application
export default class App extends React.Component {
render() {
return (
<View style={styles.container}>
<UnauthenticatedStack />
</View>
);
}
};
// Styles
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#CA3433',
},
});
AuthLoading.js
import React from 'react';
import { ActivityIndicator, AsyncStorage, StatusBar, StyleSheet, View, Text } from 'react-native';
export default class AuthLoadingScreen extends React.Component {
constructor(props) {
super(props);
this.checkUserToken();
}
async checkUserToken() {
const userToken = await AsyncStorage.getItem('userToken');
// If User Token
if (userToken) {
AsyncStorage.setItem(userToken);
this.props.navigation.navigate('Home');
}
else {
this.props.navigation.navigate('Login');
}
}
// Render any loading content that you like here
render() {
return (
<View style={styles.container}>
<Text style={styles.text}>Checking Authentication</Text>
<ActivityIndicator />
<StatusBar barStyle="default" />
</View>
);
}
}
// Styles
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#CA3433',
justifyContent: 'center',
alignItems: 'center',
},
text: {
justifyContent: 'center',
color: '#fff',
fontSize: 18,
fontWeight: '500',
},
});
Home.js
// Imports: Dependencies
import React from 'react';
import { View, StyleSheet } from 'react-native';
// Imports: Components
import List from '../components/List';
// React Native Screen: Home
export default () => (
<View style={styles.container}>
<List />
</View>
);
// Styles
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: 'white',
justifyContent: 'center',
alignItems: 'center',
},
});
Search.js
// Imports: Dependencies
import React, { Component } from 'react';
import { View, Text, StyleSheet } from 'react-native';
// Imports: Components
// React Native Screen: Search
export default class Search extends Component {
// Render
render() {
return (
<View styles={styles.container}>
<Text>Search</Text>
</View>
)
}
}
// Styles
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
justifyContent: 'center',
},
});
答案 0 :(得分:1)
在App.js中,请勿导出Firebase配置部分。 App类应为:
export default class App extends React.Component {
componentWillMount() {
const firebaseConfig = {
apiKey: FirebaseAPIKey,
authDomain: `${authDomain}`,
databaseURL: `${databaseURL}`,
projectId: `${projectId}`,
// storageBucket: "",
messagingSenderId: `${messagingSenderId}`,
}
firebase.initializeApp(config);
}
render() {
return (
<View style={styles.container}>
<UnauthenticatedStack />
</View>
)
}
};
答案 1 :(得分:1)
将AuthLoadingScreen移动到createSwitchNavigator:
const rootNavigator = createSwitchNavigator({
Home: AuthenticatedStack,
Login: UnauthenticatedStack,
AuthLoading: AuthLoadingScreen,
},
{
initialRouteName: 'AuthLoading',
});
export const AppNavigation = createAppContainer(rootNavigator)
App.js
// React Native: Application
export default class App extends React.Component {
render() {
return (
<View style={styles.container}>
<AppNavigation />
</View>
);
}
};