リダイレクトはログイン後

Question

にログインした後、私はビューにユーザーをリダイレクトしたいGoogleSigninと、ユーザーの画面の代わりに、ビュー

import React, { Component } from 'react'; 
import { AppRegistry, Platform, Text, Image, TouchableOpacity, View } from 'react-native' 
import { StackNavigator, TabNavigator, NavigationActions } from 'react-navigation' 
import { GoogleSignin, GoogleSigninButton } from 'react-native-google-signin' 

import DashboardScreen from './Components/DashboardScreen' 

// Routes 
export const MyNavigator = StackNavigator({ 
    DashboardScreen: { 
    name: 'DashboardScreen', 
    description: 'Dasboard available once logged in', 
    screen: DashboardScreen, 
    navigationOptions: { 
     title: 'Dashboard' 
    } 
    }, 
}); 

export default class MyApp extends Component { 

    //... 

    _signIn() { 
    GoogleSignin.signIn() 
    .then((user) => { 
     this.setState({ 
     isLoggedIn: true, 
     user: user 
     }) 

     // Redirect to screen here 
    }) 
    .catch((err) => { 
     console.log('Signin error', err) 
    }) 
    .done() 
    } 

    render() { 
    //... 
    } 
} 

をレンダリングするために、私は多くのことを試してみました、私はそれが何かをすべきだと思います

const navigateAction = NavigationActions.navigate({ 
    routeName: 'DashboardScreen', 
    params: { user: user.givenName } 
    }) 

    this.props.navigation.dispatch(navigateAction) 

しかし、コンソールにはthis.propsが定義されていないと記載されています。

お手伝いできますか？ ありがとうございました！

Answer 1

_signInの中のthisは、あなたのクラスにはもうなく、_signInの機能にバインドされていると思います。

それはあなたが矢印関数に_signInを修正することができる動作させるために：ここで

_signIn =() => { 
    GoogleSignin.signIn() 
    .then((user) => { 
     this.setState({ 
     isLoggedIn: true, 
     user: user 
     }) 

     const navigateAction = NavigationActions.navigate({ 
     routeName: 'DashboardScreen', 
     params: { user: user.givenName } 
     }) 

     this.props.navigation.dispatch(navigateAction) 
    }) 
    .catch((err) => { 
     console.log('Signin error', err) 
    }) 
    .done() 
} 

はthisをバインドする方法についての詳細は次のとおりです。https://medium.freecodecamp.org/react-binding-patterns-5-approaches-for-handling-this-92c651b5af56

あなたはそれとしてで見ることができるいくつかの他の記事を持っていますReactのよくある間違いです。

Answer 2

スタックナビゲータでMyApp]を追加し、この

render() { 
const { navigate } = this.props.navigation; 
    return(
     // your code 
     <Button onPress={() => navigate({ routeName: 'DashboardScreen' ,params: { user:userData }}) /> 
); 
} 

に従うと、あなたはこれを使用してDashboardScreenでのuserDataを得ることができますしてください。

this.props.navigation.state.params.user