ورود با فیسبوک در React Native

ورود با فیسبوک در هزاران اپلیکیشن Android و IOS مورد استفاده قرار میگیره و یک روش پیاده سازی ساده برای ورود هست.فیسبوک بیش از 2.73 میلیارد کاربر در سراسر جهان در حال حاضر داره.در react native با استفاده از ورود با فیسبوک ما یک روش ساده برای ورود کاربر به اپلیکیشن بدون نیاز به ثبت نام فراهم می کنیم.این عملکرد برای همه ایمن است و نیازی به نگرانی در مورد امنیت نام کاربری و رمز عبور وجود ندارد.فیسبوک SDK خودش رو دراختیار ما قرار داده که برای استفاده خیلی باحاله.

1.ابتدا دایرکتوری پروژه خودتون رو در Command Prompt یا Terminal باز کنید و دستور زیر رو برای نصب کتابخانه react-native-fbsdk اجرا کنید

npm install react-native-fbsdk --save

1	npm install react-native-fbsdk --save

2.مرحله بعدی link کردن کتابخانه به پروژه با استفاده از دستور زیر است.این دستور باعث می شود تا پروژه شما کاملا refresh شود و تمامی فایل های مورد نیاز تغییر پیدا کنند.

react-native link react-native-fbsdk

1	react-native link react-native-fbsdk

3.بعد از لینک کردن کتابخانه مطمئن شوید که تمامی تغییرات مورد نیاز اعمال شده است.بنابراین فایل build.gradle رو در مسیر Your_React_Native_Project -> android -> app با یک ویرایشگر کد باز کنید و کدهای زیر رو به اون اضافه کنید

implementation project(':react-native-fbsdk')
implementation 'com.facebook.android:facebook-android-sdk:4.34.0'

1 2	implementation project(':react-native-fbsdk') implementation 'com.facebook.android:facebook-android-sdk:4.34.0'

Source code فایل build.gradle

apply plugin: "com.android.application"
 
import com.android.build.OutputFile
 
project.ext.react = [
    entryFile: "index.js"
]
 
apply from: "../../node_modules/react-native/react.gradle"
 
 
def enableSeparateBuildPerCPUArchitecture = false
 
def enableProguardInReleaseBuilds = false
 
android {
    compileSdkVersion rootProject.ext.compileSdkVersion
 
    compileOptions {
        sourceCompatibility JavaVersion.VERSION_1_8
        targetCompatibility JavaVersion.VERSION_1_8
    }
 
    defaultConfig {
        applicationId "com.project3"
        minSdkVersion rootProject.ext.minSdkVersion
        targetSdkVersion rootProject.ext.targetSdkVersion
        versionCode 1
        versionName "1.0"
    }
    splits {
        abi {
            reset()
            enable enableSeparateBuildPerCPUArchitecture
            universalApk false  // If true, also generate a universal APK
            include "armeabi-v7a", "x86", "arm64-v8a", "x86_64"
        }
    }
    buildTypes {
        release {
            minifyEnabled enableProguardInReleaseBuilds
            proguardFiles getDefaultProguardFile("proguard-android.txt"), "proguard-rules.pro"
        }
    }
    // applicationVariants are e.g. debug, release
    applicationVariants.all { variant ->
        variant.outputs.each { output ->
            // For each separate APK per architecture, set a unique version code as described here:
            // http://tools.android.com/tech-docs/new-build-system/user-guide/apk-splits
            def versionCodes = ["armeabi-v7a":1, "x86":2, "arm64-v8a": 3, "x86_64": 4]
            def abi = output.getFilter(OutputFile.ABI)
            if (abi != null) {  // null for the universal-debug, universal-release variants
                output.versionCodeOverride =
                        versionCodes.get(abi) * 1048576 + defaultConfig.versionCode
            }
        }
    }
}
 
dependencies {
    implementation project(':react-native-fbsdk')
    implementation 'com.facebook.android:facebook-android-sdk:4.34.0'
    implementation fileTree(dir: "libs", include: ["*.jar"])
    implementation "com.android.support:appcompat-v7:${rootProject.ext.supportLibVersion}"
    implementation "com.facebook.react:react-native:+"  // From node_modules
}
 
// Run this once to be able to run the application with BUCK
// puts all compile dependencies into folder libs for BUCK to use
task copyDownloadableDepsToLibs(type: Copy) {
    from configurations.compile
    into 'libs'
}

apply plugin: "com.android.application"

import com.android.build.OutputFile

project.ext.react = [

entryFile: "index.js"

]

apply from: "../../node_modules/react-native/react.gradle"

def enableSeparateBuildPerCPUArchitecture = false

def enableProguardInReleaseBuilds = false

android {

compileSdkVersion rootProject.ext.compileSdkVersion

compileOptions {

sourceCompatibility JavaVersion.VERSION_1_8

targetCompatibility JavaVersion.VERSION_1_8

}

defaultConfig {

applicationId "com.project3"

minSdkVersion rootProject.ext.minSdkVersion

targetSdkVersion rootProject.ext.targetSdkVersion

versionCode 1

versionName "1.0"

}

splits {

abi {

reset()

enable enableSeparateBuildPerCPUArchitecture

universalApk false // If true, also generate a universal APK

include "armeabi-v7a", "x86", "arm64-v8a", "x86_64"

}

buildTypes {

release {

minifyEnabled enableProguardInReleaseBuilds

proguardFiles getDefaultProguardFile("proguard-android.txt"), "proguard-rules.pro"

}

// applicationVariants are e.g. debug, release

applicationVariants.all { variant ->

variant.outputs.each { output ->

// For each separate APK per architecture, set a unique version code as described here:

// http://tools.android.com/tech-docs/new-build-system/user-guide/apk-splits

def versionCodes = ["armeabi-v7a":1, "x86":2, "arm64-v8a": 3, "x86_64": 4]

def abi = output.getFilter(OutputFile.ABI)

if (abi != null) { // null for the universal-debug, universal-release variants

output.versionCodeOverride =

versionCodes.get(abi) * 1048576 + defaultConfig.versionCode

}

dependencies {

implementation project(':react-native-fbsdk')

implementation 'com.facebook.android:facebook-android-sdk:4.34.0'

implementation fileTree(dir: "libs", include: ["*.jar"])

implementation "com.android.support:appcompat-v7:${rootProject.ext.supportLibVersion}"

implementation "com.facebook.react:react-native:+" // From node_modules

}

// Run this once to be able to run the application with BUCK

// puts all compile dependencies into folder libs for BUCK to use

task copyDownloadableDepsToLibs(type: Copy) {

from configurations.compile

into 'libs'

}

4.فایل settings.gradle رو در مسیر Your_React_Native_Project -> android با یک ویرایشگر کد اضافه کنید و کد های زیر رو به اون اضافه کنید

include ':react-native-fbsdk'
project(':react-native-fbsdk').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-fbsdk/android')

1 2	include ':react-native-fbsdk' project(':react-native-fbsdk').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-fbsdk/android')

5.فایل MainApplication.java رو در مسیر Your_React_Native_Project -> android -> app -> src -> main -> java -> com -> Your_React_Native_Project با یک ویرایشگر کد باز کنید و کد های زیر را اضافه کنید.

import com.facebook.reactnative.androidsdk.FBSDKPackage;
import com.facebook.FacebookSdk;
import com.facebook.CallbackManager;
import com.facebook.appevents.AppEventsLogger;

import com.facebook.reactnative.androidsdk.FBSDKPackage;

import com.facebook.FacebookSdk;

import com.facebook.CallbackManager;

import com.facebook.appevents.AppEventsLogger;

6.در کلاس MainApplication یک متغیر instance از نوع CallbackManager اضافه کنید.

private static CallbackManager mCallbackManager = CallbackManager.Factory.create();
     protected static CallbackManager getCallbackManager() {
     return mCallbackManager;
     }

private static CallbackManager mCallbackManager = CallbackManager.Factory.create();

protected static CallbackManager getCallbackManager() {

return mCallbackManager;

}

7.بعد از ایمپورت کردن پکیج های بالا ما نیاز داریم تا FBSDKPackage(mCallbackManager) رو در ()getPackages فراخوانی کنیم.

new FBSDKPackage(mCallbackManager)

1	new FBSDKPackage(mCallbackManager)

source code کامل فایل MainApplication.java

package com.project3;
 
import android.app.Application;
 
import com.facebook.react.ReactApplication;
import com.facebook.reactnative.androidsdk.FBSDKPackage;
import com.facebook.react.ReactNativeHost;
import com.facebook.react.ReactPackage;
import com.facebook.react.shell.MainReactPackage;
import com.facebook.soloader.SoLoader;
 
import java.util.Arrays;
import java.util.List;
 
import com.facebook.FacebookSdk;
import com.facebook.CallbackManager;
import com.facebook.appevents.AppEventsLogger;
 
public class MainApplication extends Application implements ReactApplication {
 
 private static CallbackManager mCallbackManager = CallbackManager.Factory.create();
     protected static CallbackManager getCallbackManager() {
     return mCallbackManager;
     }
 
  private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {
    @Override
    public boolean getUseDeveloperSupport() {
      return BuildConfig.DEBUG;
    }
 
    @Override
    protected List<ReactPackage> getPackages() {
      return Arrays.<ReactPackage>asList(
          new MainReactPackage(),
          new FBSDKPackage(mCallbackManager)
      );
    }
 
    @Override
    protected String getJSMainModuleName() {
      return "index";
    }
  };
 
  @Override
  public ReactNativeHost getReactNativeHost() {
    return mReactNativeHost;
  }
 
  @Override
  public void onCreate() {
    super.onCreate();
    SoLoader.init(this, /* native exopackage */ false);
 
  }
}

package com.project3;

import android.app.Application;

import com.facebook.react.ReactApplication;

import com.facebook.reactnative.androidsdk.FBSDKPackage;

import com.facebook.react.ReactNativeHost;

import com.facebook.react.ReactPackage;

import com.facebook.react.shell.MainReactPackage;

import com.facebook.soloader.SoLoader;

import java.util.Arrays;

import java.util.List;

import com.facebook.FacebookSdk;

import com.facebook.CallbackManager;

import com.facebook.appevents.AppEventsLogger;

public class MainApplication extends Application implements ReactApplication {

private static CallbackManager mCallbackManager = CallbackManager.Factory.create();

protected static CallbackManager getCallbackManager() {

return mCallbackManager;

}

private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {

@Override

public boolean getUseDeveloperSupport() {

return BuildConfig.DEBUG;

}

@Override

protected List<ReactPackage> getPackages() {

return Arrays.<ReactPackage>asList(

new MainReactPackage(),

new FBSDKPackage(mCallbackManager)

);

}

@Override

protected String getJSMainModuleName() {

return "index";

}

};

@Override

public ReactNativeHost getReactNativeHost() {

return mReactNativeHost;

}

@Override

public void onCreate() {

super.onCreate();

SoLoader.init(this, /* native exopackage */ false);

}

8.فایل MainActivity.java رو در مسیر Your_React_Native_Project -> android -> app -> src -> main -> java -> com -> Your_React_Native_Project با یک ویرایشگر کد باز کنید و intent رو در اون ایمپورت کنید.

import android.content.Intent;

1	import android.content.Intent;

9.حالا ما نیاز داریم ()onActivityResult رو برای امکان دریافت event ها بازنویسی کنیم.

@Override
     public void onActivityResult(int requestCode, int resultCode, Intent data) {
    super.onActivityResult(requestCode, resultCode, data);
    MainApplication.getCallbackManager().onActivityResult(requestCode, resultCode, data);
    }

@Override

public void onActivityResult(int requestCode, int resultCode, Intent data) {

super.onActivityResult(requestCode, resultCode, data);

MainApplication.getCallbackManager().onActivityResult(requestCode, resultCode, data);

}

source code کامل فایل MainActivity.java

package com.project3;
 
import com.facebook.react.ReactActivity;
 
import android.content.Intent;
 
public class MainActivity extends ReactActivity {
 
    /**
     * Returns the name of the main component registered from JavaScript.
     * This is used to schedule rendering of the component.
     */
    @Override
    protected String getMainComponentName() {
        return "project3";
    }
 
 @Override
     public void onActivityResult(int requestCode, int resultCode, Intent data) {
    super.onActivityResult(requestCode, resultCode, data);
    MainApplication.getCallbackManager().onActivityResult(requestCode, resultCode, data);
    }
 
}

package com.project3;

import com.facebook.react.ReactActivity;

import android.content.Intent;

public class MainActivity extends ReactActivity {

/**

* Returns the name of the main component registered from JavaScript.

* This is used to schedule rendering of the component.

@Override

protected String getMainComponentName() {

return "project3";

}

@Override

public void onActivityResult(int requestCode, int resultCode, Intent data) {

super.onActivityResult(requestCode, resultCode, data);

MainApplication.getCallbackManager().onActivityResult(requestCode, resultCode, data);

}

پروژه شما الان آماده استفاده است.حالا باید پروژه خودمون رو در کنسول فیسبوک register کنیم.

10.وب سایت Facebook Console رو در مرورگر باز کنید.

11.با Facebook ID خودتون login کنید.

12.بر روی دکمه Add a new App کلیک کنید.

13.در مرحله بعدی نیاز داریم نام اپلیکیشن که به کاربر نمایش داده می شود و ایمیل خودمون رو وارد کنیم.

14.حالا در منو Facebook Login بر روی دکمه Setup کلیک می کنیم.

15.پلتفرم را android انتخاب کنید.

16.در اینجا نیازی به دانلود sdk فیسبوک ندارید پس بر روی Next کلیک کنید.

17.در صفحه Import the Facebook SDK شما نیاز به انجام کار خاصی ندارید پس بر روی دکمه Next کلیک کنید.

18.در پنجره Tell us about your android project ما نیاز داریم که Package name و نام default activity class رو قرار بدهیم.شما میتوانید package name رو در فایل Android Manifest پیدا کنید.

19.حالا زمانی که بر روی دکمه SAVE کلیک می کنید،مجددا پرسیده می شود که شما قصد دارید از همین package name استفاده کنید که با دکمه this package name این عملیات رو تایید می کنید.

20.مرحله بعدی وارد کردن key hashes است.شما می توانید آموزش متنی قبلی یعنی گرفتن key hash code در ویندوز رو بخونید.بعد از generate کردن Key hash code و وارد کردن کد بر روی دکمه Save کلیک کنید.

تنظیم رنگ پس زمینه Root View در react native

21.مرحله بعدی فعال کردن Single sign در اپلیکیشن است.

22.تا اینجا ما تمامی تنظیمات مربوط به کنسول فیسبوک رو به صورت کامل انجام دادیم.حالا ما نیاز داریم Facebook App ID رو در پروژه react native خودمون قرار بدیم.در پنجره کنسول فیسبوک شما می توانید Facebook App ID رو پیدا و کپی کنید.

23. فایل Your_React_Native_Project -> android -> app -> src -> main -> res -> values -> strings.xml را باز کنید و یک string named با عنوان facebook_app_id ایجاد کنید و Facebook App Id کپی شده رو اونجا قرار بدید.

Source code فایل strings.xml

<resources>
    <string name="app_name">project3</string>
    <string name="facebook_app_id">Put your Facebook APP ID Here</string>
</resources>

<string name="app_name">project3</string>

<string name="facebook_app_id">Put your Facebook APP ID Here</string>

</resources>

24.فایل Your_React_Native_Project -> android -> app -> src -> main -> AndroidManifest.xml را باز کنید.ما نیاز داریم یک meta data جدید با Facebook app id که در مرحله قبل اضافه کردیم،ایجاد کنیم.کد زیر را در بلاک application قرار دهید.

<meta-data android:name="com.facebook.sdk.ApplicationId"
          android:value="@string/facebook_app_id"/>

1 2	<meta-data android:name="com.facebook.sdk.ApplicationId" android:value="@string/facebook_app_id"/>

Source code فایل AndroidManifest.xml

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
  package="com.project3">
 
    <uses-permission android:name="android.permission.INTERNET" />
 
    <application
      android:name=".MainApplication"
      android:label="@string/app_name"
      android:icon="@mipmap/ic_launcher"
      android:roundIcon="@mipmap/ic_launcher_round"
      android:allowBackup="false"
      android:theme="@style/AppTheme">
   
   <meta-data android:name="com.facebook.sdk.ApplicationId"
          android:value="@string/facebook_app_id"/>
   
      <activity
        android:name=".MainActivity"
        android:label="@string/app_name"
        android:configChanges="keyboard|keyboardHidden|orientation|screenSize"
        android:windowSoftInputMode="adjustResize">
        <intent-filter>
            <action android:name="android.intent.action.MAIN" />
            <category android:name="android.intent.category.LAUNCHER" />
        </intent-filter>
      </activity>
      <activity android:name="com.facebook.react.devsupport.DevSettingsActivity" />
    </application>
 
</manifest>

<manifest xmlns:android="http://schemas.android.com/apk/res/android"

package="com.project3">

<uses-permission android:name="android.permission.INTERNET" />

<application

android:name=".MainApplication"

android:label="@string/app_name"

android:icon="@mipmap/ic_launcher"

android:roundIcon="@mipmap/ic_launcher_round"

android:allowBackup="false"

android:theme="@style/AppTheme">

android:value="@string/facebook_app_id"/>

<activity

android:name=".MainActivity"

android:label="@string/app_name"

android:configChanges="keyboard|keyboardHidden|orientation|screenSize"

android:windowSoftInputMode="adjustResize">

<intent-filter>

</intent-filter>

</activity>

</application>

</manifest>

با انجام تمامی مراحل فوق ما تنظیمات مربوط به پروژه رو انجام دادیم و پروژه ما آماده کدنویسی است.

25.فایل App.js را باز کنید و کامپوننت های View, StyleSheet, Text, Alert و Image رو ایمپورت کنید.

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

import React, { Component } from 'react';

import { View, StyleSheet, Text, Alert, Image } from 'react-native';

26.کامپوننت های LoginButton, AccessToken, GraphRequest و GraphRequestManager از کتابخانه react-native-fbsdk ایمپورت کنید.

import { LoginButton, AccessToken, GraphRequest, GraphRequestManager } from 'react-native-fbsdk';

1	import { LoginButton, AccessToken, GraphRequest, GraphRequestManager } from 'react-native-fbsdk';

27. در کلاس اصلی ()constructor رو تعریف کنید.درون سازنده 3state به نام های ser_name, avatar_url و avatar_show تعریف کنید.

constructor() {
    super();
    this.state = {
 
      user_name: '',
      avatar_url: '',
      avatar_show: false
    }
  }

constructor() {

super();

this.state = {

user_name: '',

avatar_url: '',

avatar_show: false

}

28.تعریف یک تابع به نام ()get_Response_Info با دو پارامتر error و result .در این تابع ما مقادیر دریافتی را در state ها ذخیره می کنیم.

get_Response_Info = (error, result) => {
    if (error) {
      Alert.alert('Error fetching data: ' + error.toString());
    } else {
 
      this.setState({ user_name: 'Welcome' + ' ' + result.name });
 
      this.setState({ avatar_url: result.picture.data.url });
 
      this.setState({ avatar_show: true })
 
      console.log(result);
 
    }
  }

get_Response_Info = (error, result) => {

if (error) {

Alert.alert('Error fetching data: ' + error.toString());

} else {

this.setState({ user_name: 'Welcome' + ' ' + result.name });

this.setState({ avatar_url: result.picture.data.url });

this.setState({ avatar_show: true })

console.log(result);

}

29.ایجاد یک تابع به نام ()onLogout و قرار دادن تمامی مقادیر state ها با null.این تابع زمانی که کابر قصد خروج را داشته باشد فراخوانی می شود.

 onLogout = () => {
 
    this.setState({ user_name: null, avatar_url: null, avatar_show: false });
 
  }

onLogout = () => {

this.setState({ user_name: null, avatar_url: null, avatar_show: false });

}

30.اضافه کردن کامپوننت های Image, Text و Facebook Login button در بلاک render’s return.

render() {
    return (
      <View style={styles.container}>
 
 
        {this.state.avatar_url ?
          <Image
            source={{ uri: this.state.avatar_url }}
            style={styles.imageStyle} /> : null}
 
        <Text style={styles.text}> {this.state.user_name} </Text>
 
        <LoginButton
          readPermissions={['public_profile']}
          onLoginFinished={(error, result) => {
            if (error) {
              console.log(error.message);
              console.log('login has error: ' + result.error);
            } else if (result.isCancelled) {
              console.log('login is cancelled.');
            } else {
              AccessToken.getCurrentAccessToken().then(data => {
                console.log(data.accessToken.toString());
 
                const processRequest = new GraphRequest(
                  '/me?fields=name,picture.type(large)',
                  null,
                  this.get_Response_Info
                );
                // Start the graph request.
                new GraphRequestManager().addRequest(processRequest).start();
 
              });
            }
          }}
          onLogoutFinished={this.onLogout}
        />
 
      </View>
    );
  }

render() {

return (

{this.state.avatar_url ?

<Image

source={{ uri: this.state.avatar_url }}

style={styles.imageStyle} /> : null}

<Text style={styles.text}> {this.state.user_name} </Text>

<LoginButton

readPermissions={['public_profile']}

onLoginFinished={(error, result) => {

if (error) {

console.log(error.message);

console.log('login has error: ' + result.error);

} else if (result.isCancelled) {

console.log('login is cancelled.');

} else {

AccessToken.getCurrentAccessToken().then(data => {

console.log(data.accessToken.toString());

const processRequest = new GraphRequest(

'/me?fields=name,picture.type(large)',

null,

this.get_Response_Info

);

// Start the graph request.

new GraphRequestManager().addRequest(processRequest).start();

});

}

}}

onLogoutFinished={this.onLogout}

</View>

);

}

31.ایجاد استایل سفارشی

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
  },
 
  text: {
    fontSize: 20,
    color: '#000',
    textAlign: 'center',
    padding: 20
  },
 
  imageStyle: {
 
    width: 200,
    height: 300,
    resizeMode: 'contain'
 
  }
});

const styles = StyleSheet.create({

container: {

flex: 1,

backgroundColor: '#fff',

alignItems: 'center',

text: {

fontSize: 20,

color: '#000',

textAlign: 'center',

padding: 20

imageStyle: {

width: 200,

height: 300,

resizeMode: 'contain'

}

});

32.کد کامل برنامه در فایل App.js

import React, { Component } from 'react';
 
import { View, StyleSheet, Text, Alert, Image } from 'react-native';
 
import { LoginButton, AccessToken, GraphRequest, GraphRequestManager } from 'react-native-fbsdk';
 
export default class App extends Component {
 
  constructor() {
    super();
    this.state = {
 
      user_name: '',
      avatar_url: '',
      avatar_show: false
    }
  }
 
  get_Response_Info = (error, result) => {
    if (error) {
      Alert.alert('Error fetching data: ' + error.toString());
    } else {
 
      this.setState({ user_name: 'Welcome' + ' ' + result.name });
 
      this.setState({ avatar_url: result.picture.data.url });
 
      this.setState({ avatar_show: true })
 
      console.log(result);
 
    }
  }
 
  onLogout = () => {
 
    this.setState({ user_name: null, avatar_url: null, avatar_show: false });
 
  }
 
  render() {
    return (
      <View style={styles.container}>
 
 
        {this.state.avatar_url ?
          <Image
            source={{ uri: this.state.avatar_url }}
            style={styles.imageStyle} /> : null}
 
        <Text style={styles.text}> {this.state.user_name} </Text>
 
        <LoginButton
          readPermissions={['public_profile']}
          onLoginFinished={(error, result) => {
            if (error) {
              console.log(error.message);
              console.log('login has error: ' + result.error);
            } else if (result.isCancelled) {
              console.log('login is cancelled.');
            } else {
              AccessToken.getCurrentAccessToken().then(data => {
                console.log(data.accessToken.toString());
 
                const processRequest = new GraphRequest(
                  '/me?fields=name,picture.type(large)',
                  null,
                  this.get_Response_Info
                );
                // Start the graph request.
                new GraphRequestManager().addRequest(processRequest).start();
 
              });
            }
          }}
          onLogoutFinished={this.onLogout}
        />
 
      </View>
    );
  }
}
const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
  },
 
  text: {
    fontSize: 20,
    color: '#000',
    textAlign: 'center',
    padding: 20
  },
 
  imageStyle: {
 
    width: 200,
    height: 300,
    resizeMode: 'contain'
 
  }
});

100

101

102

103

104

import React, { Component } from 'react';

import { View, StyleSheet, Text, Alert, Image } from 'react-native';

import { LoginButton, AccessToken, GraphRequest, GraphRequestManager } from 'react-native-fbsdk';

export default class App extends Component {

constructor() {

super();

this.state = {

user_name: '',

avatar_url: '',

avatar_show: false

}

get_Response_Info = (error, result) => {

if (error) {

Alert.alert('Error fetching data: ' + error.toString());

} else {

this.setState({ user_name: 'Welcome' + ' ' + result.name });

this.setState({ avatar_url: result.picture.data.url });

this.setState({ avatar_show: true })

console.log(result);

}

onLogout = () => {

this.setState({ user_name: null, avatar_url: null, avatar_show: false });

}

render() {

return (

{this.state.avatar_url ?

<Image

source={{ uri: this.state.avatar_url }}

style={styles.imageStyle} /> : null}

<Text style={styles.text}> {this.state.user_name} </Text>

<LoginButton

readPermissions={['public_profile']}

onLoginFinished={(error, result) => {

if (error) {

console.log(error.message);

console.log('login has error: ' + result.error);

} else if (result.isCancelled) {

console.log('login is cancelled.');

} else {

AccessToken.getCurrentAccessToken().then(data => {

console.log(data.accessToken.toString());

const processRequest = new GraphRequest(

'/me?fields=name,picture.type(large)',

null,

this.get_Response_Info

);

// Start the graph request.

new GraphRequestManager().addRequest(processRequest).start();

});

}

}}

onLogoutFinished={this.onLogout}

</View>

);

}

const styles = StyleSheet.create({

container: {

flex: 1,

backgroundColor: '#fff',

alignItems: 'center',

text: {

fontSize: 20,

color: '#000',

textAlign: 'center',

padding: 20

imageStyle: {

width: 200,

height: 300,

resizeMode: 'contain'

}

});

اسکرین شات:

ورود با فیسبوک در React Native

مطالب زیر را حتما مطالعه کنید

دیدگاهتان را بنویسید لغو پاسخ

مطالب زیر را حتما مطالعه کنید

چگونه از ماژول های نیتیو Android و IOS در React Native استفاده کنیم؟

آموزش آرایه در جاوا اسکریپت ( JavaScript)

استفاده از Flipper در پروژه های ری اکت نیتیو (React Native)

نمایش PDF در react native

ایجاد Timeline ListView در React Native

آموزش React Navigation 5

دیدگاهتان را بنویسید لغو پاسخ