登录后重定向到屏幕

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

我猜this里面的_signIn不再是你的班级了，而是_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