登录后重定向到屏幕

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)

但控制台说这是不确定的。

您能提供帮助吗？谢谢！

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/reaect-binding-patterns-5-5---5--- apphackes-for andling-thins-92c651b56

>

您还有其他几篇文章，因为这是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