いつもお世話になっております。
React Native Firebaseを使って、Facebook認証をしました。ログインした後に、画面を遷移したいと考えています。
JavaScript
1// Calling the following function will open the FB login dialogue: 2const Auth = () => { 3 4 return LoginManager 5 .logInWithReadPermissions(['public_profile', 'email']) 6 .then((result) => { 7 8 if (!result.isCancelled) { 9 console.log(`Login success with permissions: ${result.grantedPermissions.toString()}`) 10 // get the access token 11 return AccessToken.getCurrentAccessToken() 12 } 13 }) 14 .then(data => { 15 if (data) { 16 // create a new firebase credential with the token 17 const credential = firebase.auth.FacebookAuthProvider.credential(data.accessToken) 18 // login with credential 19 return firebase.auth().signInAndRetrieveDataWithCredential(credential) 20 } 21 }) 22 .then((currentUser) => { 23 if (currentUser) { 24 console.log(currentUser); 25 return this.props.navigation.navigate('Main'); 26 } 27 }) 28 .catch((error) => { 29 console.log(`Login fail with error: ${error}`) 30 }) 31} 32 33class SignInScreen extends React.Component { 34 render() { 35 const { navigate } = this.props.navigation; 36 37 return ( 38 <View style={styles.containerStyle}> 39 <TouchableOpacity onPress={Auth}> 40 <Text style={styles.textStyle}>Facebook</Text> 41 </TouchableOpacity> 42 </View> 43 ); 44 } 45}
上記の(currentUser)後に
this.props.navigation.navigate('Main');
してみたのですが、Mainの画面へ遷移しません。。(特にエラーコードもなし)
Router.jsは下記です。
JavaScript
1import React from 'react'; 2import { StackNavigator } from 'react-navigation'; 3import { SignInScreen, HomeScreen } from './screens'; 4 5const Router = StackNavigator({ 6 SignIn: { 7 screen: SignInScreen, 8 navigationOptions: { 9 title: 'SignIn', 10 } 11 }, 12 Main: { 13 screen: HomeScreen, 14 navigationOptions: { 15 title: 'Home', 16 } 17 }, 18}, { 19 initialRouteName: 'SignIn' 20}); 21 22export default Router;
お知恵を拝借できれば幸いです(_ _)
Facebookの認証自体は成功するのですが、その後の遷移がうまく行きません。
追記(1)
console.logで this.props.navigation の中身を見てみたのですが、
Login fail with error: TypeError: Cannot read property 'navigate' of undefined
と出たので、
const Auth = () => { const { navigation } = this.props; return LoginManager ・・・
を追加したのですが、今度はnavigationエラーとなってしまいました(汗
追記(2)
JavaScript
1class SignInScreen extends React.Component { 2 render() { 3 const { navigation } = this.props; 4・・・
追記(3)
App.js
JavaScript
1/** 2 * Sample React Native App 3 * https://github.com/facebook/react-native 4 * @flow 5 */ 6import React from 'react'; 7import { createStore, applyMiddleware } from 'redux'; 8import ReduxThunk from 'redux-thunk'; 9import { Provider } from 'react-redux'; 10import { View } from 'react-native'; 11import Reducers from './reducers'; 12import Router from './Router'; 13 14const App = () => { 15 16 const store = createStore(Reducers, {}, applyMiddleware(ReduxThunk)); 17 18 return ( 19 <Provider store={store}> 20 <View style={{ flex: 1 }}> 21 <Router /> 22 </View> 23 </Provider> 24 ); 25}; 26 27export default App;
こちらでやってもできません。。
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2018/02/06 00:34