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并按照

进行操作

jvar datasetarr = []; 
  let promiseKey = new Promise((resolve, reject) => {
            for(var i = 0; i < receiptlist.length; i++){
                for(var k = 0; k < ritemlist.length; k++){
                    if(receiptlist[i].date.substring(0, 4) == new 
                       Date().getFullYear()){
                        if(ritemlist[k].receiptID == receiptlist[i].receiptID){
                                  //Push your object here.
                                datasetarr.push({accountID: receiptlist[i].accountID, subtype: ritemlist[k].type});
                            }
                        }
                    }
                }
            }

           //Before resolving check for the duplicates.
            _.uniqBy(datasetarr, function (data) {
                return data.accountID;
             });

            resolve(datasetarr);
        });

你将使用它在DashboardScreen中获取userData。

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

登录后重定向到屏幕

2 个答案: