如果用户已经登录,我的目标是将用户重定向到Home
组件。只有当Home
是_logInUser()
时,我才能登录用户并将其重定向到Home
调用。但是,一旦重定向到Login
组件,如果我刷新模拟器,应用程序将返回componentWillMount()
组件。
我尝试使用let user = firebaseApp.auth().currentUser
并设置user
来解决此问题。但是,我甚至将if
记录到控制台,但似乎else
检查直接转到react-native-router-flux
语句。我很感激任何见解!
这是我的代码(我使用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);
进行路由):
index.ios.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}`
);
});
}
}
login.js
dayNames[date.getDay()];
答案 0 :(得分:6)
首先,在您的登录组件中,您正在以同步方式检查currentUser,但它可能尚未在componentWillMount中可用。你可以异步进入:
firebase.auth().onAuthStateChanged(function(user) {
if (user) {
// User is signed in.
} else {
// No user is signed in.
}
});
如果用户已登录,则最有可能调用Actions.home()
。但是,随着您的应用程序的增长,您可能希望从登录屏幕上移动此逻辑。正如凯尔建议的那样,您可以使用切换功能。通常(引用文档)与redux一起使用,如下所示:
const RootSwitch = connect(state => ({loggedIn: state.transient.loggedIn}))(Switch);
const rootSelector = props => props.loggedIn ? 'workScreens' : 'authScreens';
const scenes = Actions.create(
<Scene key="root" tabs={true} component={RootSwitch} selector={rootSelector}>
<Scene key="authScreens" hideNavBar={true}>
<Scene key="login" component={Login} initial={true}/>
<Scene key="register" component={Register} />
...
</Scene>
<Scene key="workScreens">
<Scene key="home" component={Home} initial={true}/>
<Scene key="profile" component={ProfileMain}/>
...
</Scene>
</Scene>
);
如果您不想使用redux,您可以手动换行Switch而不是使用react-redux的连接并将loggedIn prop传递给Switch。例如,你可以在这个包装器中监听firebase onAuthStateChanged,如下所示:
class FirebaseSwitch extends Component {
state = {
loggenIn: false
}
componentWillMount() {
firebase.auth().onAuthStateChanged( user =>
this.setState({loggedIn: !!user})
);
}
render() {
return <Switch loggedIn={this.state.loggedIn} {...this.props}/>;
}
}