Передача имени пользователя и фамилии от входа в Google - PullRequest
Новая
       16

Передача имени пользователя и фамилии от входа в Google

0 голосов
/ 02 марта 2020

Мне удалось настроить вход в Google с помощью «expo-google-app-auth». Это мой логин. js, который обрабатывает страницу входа и данные для входа в Google и логины c: 

import React, { Component } from 'react'
import {Text,
        View,
        StyleSheet,
        Image,
        Alert} from 'react-native'
import { TouchableOpacity } from 'react-native-gesture-handler';
import { Provider as PaperProvider, 
         Button, 
         Caption} from 'react-native-paper'
import { createStackNavigator } from '@react-navigation/stack'
import { NavigationContainer } from '@react-navigation/native';


import MyDrawer from '../navigation/Drawer'
import QR from './QR'

const Stack = createStackNavigator();

import * as Google from 'expo-google-app-auth';

const IOS_CLIENT_ID =
  "your-ios-client-id";
const ANDROID_CLIENT_ID =
  "my-android-id";

class Login extends Component {  

    signInWithGoogle = async () => {
        try {
          const result = await Google.logInAsync({
            iosClientId: IOS_CLIENT_ID,
            androidClientId: ANDROID_CLIENT_ID,
            scopes: ["profile", "email"]
          });

          if (result.type === "success") {
            console.log("LoginScreen.js.js 21 | ", result.user.givenName, result.user.familyName, result.user.email, result.user.photoUrl);
            this.props.navigation.navigate("MyDrawer", {
              username: result.user.givenName,
              lastname: result.user.familyName,
              email: result.user.email,
              photoUrl: result.user.photoUrl
            }); //after Google login redirect to MyDrawer
            return result.accessToken;
          } else {
            return { cancelled: true };
          }
        } catch (e) {
          console.log('LoginScreen.js.js 30 | Error with login', e);
          return { error: true };
        }
      };
render(){
        return (
            <PaperProvider>
                <View style={styles.container}>
                    <View style={styles.imageCon}>
                        <Image
                        source={require('../img/logo-krug.png')}></Image>
                    </View>
                    <View style={styles.textCon}>
                        <Text style={styles.text}> Dobrodošli u eSTUDENT mobilnu aplikaciju!</Text>
                    </View>
                    <View style={styles.buttonCon}>
                        <Button
                        icon='camera'
                        mode='outlined'
                        onPress={this.signInWithGoogle}
                        >   
                        google
                        </Button>
                    </View>
                </View>
            </PaperProvider>
        )
}

}
 export default function LoginStack() {
     return (
         <NavigationContainer>
             <Stack.Navigator
                 initialRouteName='Login'
                 screenOptions={{
                        headerShown: false
                    }}>
                 <Stack.Screen name='MyDrawer' component={MyDrawer} />
                 <Stack.Screen name='Login' component={Login} />
             </Stack.Navigator>
         </NavigationContainer>
     )
 }

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#ecf0f1'
    },
    imageCon: {
        height: '35%',
        width: '100%',
        justifyContent: "center",
        alignItems: "center"
    },
    textCon:{
        height:'20%',
        alignItems: 'center',
        justifyContent: 'center'
    },
    text: {
        textAlign: "center",
        fontSize: 20,
        fontWeight: 'bold'
    },
    buttonCon:{
        height: '30%',
        justifyContent:'center',
        alignItems: 'center'
    },
});

И я хочу передать имя пользователя, фамилию, адрес электронной почты и фотографию профиля эти 2 файла. Drawer. js, который обрабатывает боковой ящик и навигацию: 

import React from 'react'
import { createDrawerNavigator } from '@react-navigation/drawer';
import { NavigationContainer } from '@react-navigation/native';
import { Ionicons, MaterialIcons, Feather } from '@expo/vector-icons';
import { ScrollView,
         TouchableOpacity,
         Text,
         View,
         Image,
         StatusBar,
         StyleSheet,
          } from 'react-native'

import QR from '../screens/QR';
import Odabir from '../screens/Odabir'
import { SafeAreaView } from 'react-navigation';
import { Divider } from 'react-native-paper'


const Drawer = createDrawerNavigator();

function CustomDrawerContent(props) {
  return(
    <SafeAreaView style={{flex:1}}>
    <View style={{height: 150, alignItems: 'center', justifyContent: 'center', marginTop: Platform.OS === 'ios' ? 0 : StatusBar.currentHeight}}>
      <Image source={require('../img/account.png')}
        style={{height: 120, width: 120, borderRadius: 60}}
       />
    </View>
    <View style={{height: 50, alignItems:'center'}}>
      <Text style={styles.naslov}> This is where I want to pass the username and last name </Text>
    </View>
    <Divider />
      <ScrollView style={{marginLeft: 5,}}>

        <TouchableOpacity
          style={{marginTop: 20, marginLeft: 20}}
          onPress={() => props.navigation.navigate('QR')}
          >
        <View style={{padding:10}}>
          <Ionicons name='ios-qr-scanner' size={20} styles={{}}>
            <Text style={styles.naslov}>      QR</Text>
          </Ionicons>
          </View>
          </TouchableOpacity>
          <TouchableOpacity
          style={{marginTop: 20, marginLeft: 20}}
          onPress={() => props.navigation.navigate('Odabir')}
          >
        <View style={{padding:10}}>
          <Ionicons name='ios-qr-scanner' size={20} styles={{}}>
            <Text style={styles.naslov}>      Odabir</Text>
          </Ionicons>
          </View>
          </TouchableOpacity>
          <TouchableOpacity
          style={{marginTop: 20, marginLeft: 20}}
          onPress={() => props.navigation.navigate('Odabir')}
          >
        <View style={{padding:10}}>
          <Ionicons name='ios-qr-scanner' size={20} styles={{}}>
            <Text style={styles.naslov}>      Odabir</Text>
          </Ionicons>
          </View>
          </TouchableOpacity>
      </ScrollView>
    </SafeAreaView>
  )
}



export default function MyDrawer() {
  return (
      <NavigationContainer independent={true}>
        <Drawer.Navigator initialRouteName='QR' drawerContent={props => CustomDrawerContent(props)}>
        <Drawer.Screen
         name="QR" 
         component={QR}
          />
        <Drawer.Screen 
         name="Odabir" 
         component={Odabir}
          />
        </Drawer.Navigator>
    </NavigationContainer>
  );
}

const styles = StyleSheet.create({
  naslov: {
    fontSize: 20,
  },

})

и, наконец, QR. js, который содержит некоторую базовую c информацию, и я хотел бы немного персонализировать ее, так как Это домашняя страница, на которую пользователи попадают на 

import React, { Component } from 'react'
import {Text,
        SafeAreaView,
        View, 
        StyleSheet,
        Image 
        } from 'react-native'

import Header from '../navigation/Header'

export default function QR({navigation}) {
        return (
            <SafeAreaView style={styles.container}>
            <Header title='Moj QR' isHome={true} navigation={navigation}/>
                <View style={styles.qrCon}>
                    <Image
                        style={styles.qr} 
                        source={require('../img/QR_code_for_mobile_English_Wikipedia.svg.png')}
                        />
                </View>
                <View style={styles.textCon}>
                    <Text style={styles.text}>This is where I want to pass the username and last name</Text>
                    <Text style={styles.text}>Ovo je tvoj QR kod</Text>
                </View>

            </SafeAreaView>
        )
    }

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#ecf0f1',
        alignItems: 'center',

    },
    qrCon:{
        width: '60%',
        height: '60%',
        alignItems: 'center',
        justifyContent: 'center',
    },
    qr: {
        width: '120%',
        height: '120%',
        resizeMode: 'contain'
    },
    textCon: {
        height: '7%'
    },
    text:{
        fontSize: 35,
        fontWeight: '600'
    },
    buttonCon:{
        height: '15%',
        justifyContent:'center',
        alignItems: 'center'
    }
})

Пример, которому я следую, использовал {this.props.navigation.getParam("username")}, но он мне не подходит. Как бы я точно передал данные?

Ответы [ 2 ]

0 голосов
/ 02 марта 2020

Способ решить эту проблему, по крайней мере, передать данные компоненту Drawer.js, состоит в том, чтобы переписать код следующим образом: 

if (result.type === "success") {
            console.log("LoginScreen.js.js 21 | ", result.user.givenName, result.user.familyName, result.user.email, result.user.photoUrl);
            this.props.navigation.navigate("MyDrawer",
            username = result.user.givenName,
            lastname = result.user.familyName,
            email = result.user.email,
            photoUrl = result.user.photoUrl);
            return result.accessToken;
            ;

Затем просто поместить его как переменную в Drawer.js

<View style={{height: 30, alignItems:'center'}}>
      <Text style={styles.naslov}>{username} {lastname}</Text>
    </View>
0 голосов
/ 02 марта 2020

У меня недавно была эта проблема. React navigation 5 не поддерживает props.navigation.getParam, вместо этого вы можете использовать this.props.route.params для доступа к данным, которые вы передали в свой элемент навигации. Таким образом, для доступа к имени пользователя вы можете использовать this.props.route.params.username;

...