Mein Ziel ist es, den Benutzer an die Home
Komponente umzuleiten, wenn der Benutzer bereits angemeldet ist. Ich kann einen Benutzer anmelden und nur an Home
umleiten, wenn _logInUser()
aufgerufen wird . Wenn ich den Simulator jedoch einmal auf die Komponente Home
umgeleitet habe, geht die App zurück zur Komponente Login
.React Native - Umleiten des angemeldeten Firebase-Benutzers an Home Component
Ich versuchte, dies zu lösen mit componentWillMount()
und Einstellung let user = firebaseApp.auth().currentUser
. Allerdings loggte ich sogar die user
auf der Konsole, aber es scheint, als ob die if
Überprüfung direkt auf die else
Anweisung geht. Ich würde jede Einsicht schätzen!
Hier ist mein Code (I react-native-router-flux
für das Routing bin mit):
index.ios.js
import React, { Component } from 'react';
import { Scene, Router } from 'react-native-router-flux';
import {
AppRegistry,
} from 'react-native';
// Components
import Login from './components/user/login/login';
import Home from './components/user/home/home';
class AppName extends Component {
render() {
return (
<Router>
<Scene key="root">
<Scene key="login" component={Login} title="Login" hideNavBar={true} initial={true}/>
<Scene key="home" component={Home} title="Home"/>
</Scene>
</Router>
);
}
}
AppRegistry.registerComponent('AppName',() => AppName);
login.js
import React, { Component } from 'react';
import {
AlertIOS,
Dimensions,
Image,
ScrollView,
StyleSheet,
Text,
TextInput,
TouchableOpacity,
View
} from 'react-native';
import { KeyboardAwareScrollView } from 'react-native-keyboard-aware-scroll-view';
import { Actions } from 'react-native-router-flux';
import firebaseApp from 'AppName/firebase_setup';
// Set width and height to screen dimensions
const { width, height } = Dimensions.get("window");
// For Firebase Auth
const auth = firebaseApp.auth();
// Removed styles for StackOverflow
export default class Login extends Component {
constructor(props) {
super(props);
this.state = {
email: '',
password: ''
}
}
componentWillMount() {
let user = auth.currentUser;
if (user != null) {
console.log(user);
Actions.home
} else {
return;
}
}
render() {
return (
<View style={styles.mainContainer}>
<KeyboardAwareScrollView
style={styles.scrollView}
keyboardShouldPersistTaps={false}
automaticallyAdjustContentInsets={true}
alwaysBonceVertical={false}
>
<View style={styles.loginContainer}>
<View style={styles.inputContainer}>
<TextInput
style={styles.formInput}
placeholder="Email"
keyboardType="email-address"
autoFocus={true}
autoCorrect={false}
autoCapitalize="none"
onChangeText={(email) => this.setState({email})}
/>
<TextInput
style={styles.formInput}
secureTextEntry={true}
placeholder="Password"
autoCorrect={false}
autoCapitalize="none"
onChangeText={(password) => this.setState({password})}
/>
<TouchableOpacity
style={styles.loginButton}
onPress={this._logInUser.bind(this)}
>
<Text style={styles.loginButtonText}>Log In</Text>
</TouchableOpacity>
<TouchableOpacity>
<Text style={styles.toSignupButton}>Dont have an account? Create one!</Text>
</TouchableOpacity>
</View>
</View>
<View style={styles.footer}>
<Text style={styles.footerText}>
By signing up, I agree to TextbookSwap's <Text style={styles.footerActionText}>Terms of Service</Text> and <Text style={styles.footerActionText}>Privacy Policy</Text>.
</Text>
</View>
</KeyboardAwareScrollView>
</View>
);
}
_logInUser() {
let email = this.state.email;
let password = this.state.password;
auth.signInWithEmailAndPassword(email, password)
.then(Actions.home)
.catch((error) => {
AlertIOS.alert(
`${error.code}`,
`${error.message}`
);
});
}
}
Entschuldigung, ich habe keine vollständige Antwort für Sie. Aber ich glaube, dass die [Switch-Funktion] (https://github.com/aksonov/react-native-router-flux/blob/master/docs/OTHER_INFO.md#switch-new-feature) hier nützlich sein könnte. –