質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
Firebase

Firebaseは、Googleが提供するBasSサービスの一つ。リアルタイム通知可能、並びにアクセス制御ができるオブジェクトデータベース機能を備えます。さらに認証機能、アプリケーションのログ解析機能などの利用も可能です。

React Native

React Nativeは、ネイティブモバイルアプリ(iOS/Android)を作成できるJavaScriptフレームワークです。Reactと同じ設計のため、宣言的なコンポーネントでリッチなUIを開発することが可能です。

Q&A

解決済

1回答

512閲覧

ログイン後の遷移がうまくいかない(react native)

yamady

総合スコア176

Firebase

Firebaseは、Googleが提供するBasSサービスの一つ。リアルタイム通知可能、並びにアクセス制御ができるオブジェクトデータベース機能を備えます。さらに認証機能、アプリケーションのログ解析機能などの利用も可能です。

React Native

React Nativeは、ネイティブモバイルアプリ(iOS/Android)を作成できるJavaScriptフレームワークです。Reactと同じ設計のため、宣言的なコンポーネントでリッチなUIを開発することが可能です。

0グッド

0クリップ

投稿2018/02/04 06:01

編集2018/02/06 00:37

いつもお世話になっております。

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;

こちらでやってもできません。。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

js

1const Auth = (props) => {

Auth の引数に props が渡っているので props.navigation.navitate('Main') とすることで遷移しないでしょうか ?

投稿2018/02/05 16:25

januswel

総合スコア301

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

yamady

2018/02/06 00:34

いつもご回答いただき、ありがとうございます。const Authの(props)を外してみました。そもそも、this.propsが渡ってきていないです。。 渡しているApp.jsの記述が間違っているかもしれないです。。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問