私の目標はHome
、ユーザーがすでにログインしている場合にユーザーをコンポーネントにリダイレクトすることです。ユーザーにログインして、が呼び出されたHome
場合にのみリダイレクトすることができます_logInUser()
。ただし、Home
コンポーネントにリダイレクトされた後、シミュレーターを更新すると、アプリはLogin
コンポーネントに戻ります。
を使用componentWillMount()
して設定してこれを解決しようとしましたlet user = firebaseApp.auth().currentUser
。ただし、user
コンソールにログを記録したこともありますが、if
チェックはelse
ステートメントに直接反映されているようです。洞察をいただければ幸いです。
これが私のコードです(私はreact-native-router-flux
ルーティングに使用しています):
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}`
);
});
}
}
まず、ログインコンポーネントで、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を使用したくない場合は、react-reduxの接続を使用する代わりに手動でSwitchをラップし、loggedInpropをSwitchに渡すことができます。たとえば、このラッパーで次のようなFirebaseonAuthStateChangedをリッスンできます。
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}/>;
}
}
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加