آموزشگاه برنامه نویسی تحلیل داده
آموزشگاه برنامه نویسی تحلیل داده

آموزش ادغام React Native با application های موجود

دوره های مرتبط با این مقاله

ادغام React Native با application های موجود

React Native برای زمانی که از صفر شروع به توسعه ی یک application می کنید گزینه عالی است. با این حال، درصورت افزودن یک view یا یک جریان کاربری به یک application native موجود هم به خوبی کار می کند. در طی چند مرحله، می توانید قابلیت ها، صفحات، viewها و... React Native را به پروژه تان اضافه کنید.

برحسب پلتفرم هدف، مراحل متفاوت است. برحسب پلتفرم مورد نظرتان، یکی از سه بخش زیر را دنبال کنید:


استفاده از React Native در یک اپلیکیشن موجود برپایه Objective-C

مفاهیم کلیدی

مراحل مهم ادغام component های React Native به application iOS :

  1. dependency ها و ساختار دایرکتوری React Native را راه اندازی کنید.
  2. component های React Native که می خواهید به application خود اضافه کنید را بشناسید.
  3. این component ها را به عنوان dependency ها توسط CocoaPods اضافه کنید.
  4. component های React Native را که مد نظرتان است در جاوااسکریپت توسعه دهید.
  5. یک RCTRootView به application iOS خود اضافه کنید. این view به عنوان container برای React Native component عمل می کند.
  6. Server React Native را راه اندازی کنید و application native را روی آن اجرا کنید.
  7. بررسی کنید که بخش های React Native application تان به درستی کار می کند.

پیش نیاز ها

دستورالعمل های لازم برای ساخت application با کد native را از بخش شروع توسعه با React Native دنبال کنید و محیط توسعه برای ساخت application React Native برای iOS را راه اندازی کنید.

1. ساختار دایرکتوری را تنظیم کنید

یک پوشه جدید برای پروژه React Native خود ایجاد کنید، سپس پروژه موجود iOS خود را به زیر پوشه / ios کپی کنید.

2. نصب dependency های جاوا اسکریپت

به root directory پروژه خود بروید و یک فایل package.json جدید با محتوای زیر ایجاد کنید:


{
  "name": "MyReactNativeApp",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "start": "yarn react-native start"
  }
}

از نصب بودن yarn package manager روی سیستم تان مطمئن شوید.

package های react و react-native را نصب کنید. یک ترمینال باز کنید، به دایرکتوری فایل package.json بروید و دستور زیر را اجرا کنید:

$ yarn add react-native

این دستور یک پیام مشابه پیام زیر چاپ می کند:


warning "react-native@0.52.2" has unmet peer dependency "react@16.2.0".

این به این معناست که باید react را نصب کنید:


$ yarn add react@version_printed_above

Yarn یک پوشه جدید با نام /node_modules ساخته است. این پوشه تمام dependency های جاوااسکریپتی پروژه را که برای build شدن لازم است ذخیره می کند.

node_modules/ را به فایل .gitignore پروژه اضافه کنید.

نصب CocoaPods

CocoaPods یک ابزار manager package برای توسعه iOS و macOS است. ما از آن برای اضافه کردن کد واقعی framework React Native به صورت local به پروژه فعلی استفاده می کنیم.

پیشنهاد می کنیم CocoaPods را از طریق Homebrew نصب کنید:


$ brew install cocoapods

از نظر فنی استفاده نکردن از CocoaPods ممکن است، اما این نیاز به افزودن دستی کتابخانه و linker دارد که این فرایند را بیش از حد پیچیده می کند.

افزودن React Native به application خود

فرض کنیم application مورد نظر بازی 2048، این منوی اصلی application native بدون React Native است:


افزودن React Native به application Objective-C

ابزار Command Line برای Xcode

ابزار Command Line را نصب کنید. "Preferences..." را در منوی Xcode انتخاب کنید. به پنل Location بروید و ابزارها را با انتخاب آخرین نسخه از منوی Command Line Tools نصب کنید.


افزودن React Native به application Objective-C

تنظمیات مربوط به dependency های CocoaPods

قبل از اینکه React Native را به برنامه خود اضافه کنید، باید تصمیم بگیرید که چه بخش هایی از framework React Native را می خواهید ادغام کنید. ما از CocoaPods برای تعیین اینکه application مان به کدام یک از "subspec" ها وابسته باشد، استفاده خواهیم کرد.

فهرست subspecs در /node_modules/react-native/React.podspec در دسترس است. آنها به طور کلی براساس کاربردشان نامگذاری شده اند. به عنوان مثال، معمولا همیشه زیرمجموعه Core را لازم دارید. این به شما AppRegistry، StyleSheet، View و سایر کتابخانه های مهم React Native را می دهد. اگر می خواهید کتابخانه React Native Text (مثلا برای المان های < Text > ) را اضافه کنید، باید از زیرمجموعه RCTText استفاده کنید. اگر می خواهید کتابخانه تصویر (مثلا برای المان های < Image > ) را را استفاده کنید، به زیرمجموعه RCTImage نیاز خواهید داشت.

در یک فایل Podfile می توانید مشخص کنید برنامه تان به کدام زیرمجموعه dependency دارد. ساده ترین راه ایجاد Podfile با اجرای فرمان init در زیر پوشه / ios پروژه است:


$ pod init

Podfile حاوی تنظیماتی آماده هست که باید بعدا تغییر کنند. فایل نهایی چیزی شبیه زیر خواهد بود:


# The target name is most likely the name of your project.
target 'NumberTileGame' do
  # Your 'node_modules' directory is probably in the root of your project,
  # but if not, adjust the `:path` accordingly
  pod 'React', :path = >  '../node_modules/react-native', :subspecs = >  [
    'Core',
    'CxxBridge', # Include this for RN  > = 0.47
    'DevSupport', # Include this to enable In-App Devmenu if RN  > = 0.43
    'RCTText',
    'RCTNetwork',
    'RCTWebSocket', # Needed for debugging
    'RCTAnimation', # Needed for FlatList and animations running on native UI thread
    # Add any other subspecs you want to use in your project
  ]
  # Explicitly include Yoga if you are using RN  > = 0.42.0
  pod 'yoga', :path = >  '../node_modules/react-native/ReactCommon/yoga'
  # Third party deps podspec link
  pod 'DoubleConversion', :podspec = >  '../node_modules/react-native/third-party-podspecs/DoubleConversion.podspec'
  pod 'glog', :podspec = >  '../node_modules/react-native/third-party-podspecs/glog.podspec'
  pod 'Folly', :podspec = >  '../node_modules/react-native/third-party-podspecs/Folly.podspec'
end

پس از اینکه فایل را ایجاد کردید، آماده اید که pod را نصب کنید:


$ pod install

خروجی دستور بالا چیزی شبیه زیر است:


Analyzing dependencies
Fetching podspec for `React` from `../node_modules/react-native`
Downloading dependencies
Installing React (0.26.0)
Generating Pods project
Integrating client project
Sending stats
Pod installation complete! There are 3 dependencies from the Podfile and 1 total pod installed.

اگر با خطایی درمورد xcrun مواجه شدید، بررسی کنید در Xcode، در مسیر Preferences > Locations ابزار Command Line تعیین شده است.

ادغام کد

اکنون میخواهیم application native iOS را تغییردهیم که با React Native ترکیب شود. برای application مثالمان، 2048، یک صفحه ی React Native با عنوان "High Score" اضافه می کنیم.

component React Native

اولین بخش کدی که می نویسیم کدی به زبان React Native خواهد بود که صفحه ای برای ما می سازد که به application native اضافه می شود.

1. ایجاد فایل index.js

ابتدا، یک فایل خالی به اسم index.js در root پروژه ی React Native خود بسازید.

فایل index.js نقطه شروع application های React Native است، و همیشه لازمش داریم. ممکن است فایل کوچکی باشد که فایل های دیگر را که بخشی از component React Native یا application هستند، require کند، یا ممکن است تمام کدهای لازم را در خود داشته باشد. در مثال ما، همه چیز درون فایل است.

2.افزودن کد React Native

درون index.js، کامپوننت خود را بسازید. در مثال ما، یک component ساده < Test > و یک < View > ی استایل دهی شده، داریم:


import React from 'react';
import {AppRegistry, StyleSheet, Text, View} from 'react-native';
class RNHighScores extends React.Component {
  render() {
    var contents = this.props['scores'].map((score) = > (
      < Text key={score.name}>
        {score.name}:{score.value}
        {'\n'}
      < /Text>
    ));
    return (
      < View style={styles.container}>
        < Text style={styles.highScoresTitle}>2048 High Scores!< /Text>
        < Text style={styles.scores}>{contents}< /Text>
      < /View>
    );
  }
}
const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#FFFFFF',
  },
  highScoresTitle: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
  scores: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  },
});
// Module name
AppRegistry.registerComponent('RNHighScores', () = > RNHighScores);

RNHighScores نام ماژولی است که موقع افزودن یک view به React Native از داخل application iOS تان استفاده می شود.

RCTRootView

حال که component React Native را با استفاده از index.js ساختید، باید آن را به یک ViewController موجود یا جدید اضافه کنید. آسانترین راه ساختن یک event path به component و سپس افزودن آن به یک ViewController موجود است.

ما component را به یک view native به نام RCTRootView در ViewController وصل می کنیم که درواقع آن را نگه می دارد.

1. ساخت یک Event Path

می توانید یک لینک جدید به منوی اصلی بازی اضافه کنید که به صفحه ی React Native "High Score" برود.


افزودن React Native به application Objective-C

2. حال یک handler از لینک داخل منو اضافه می کنیم. یک متد به ViewController اصلی application تان اضافه می شود. اینجاست که RCTRootView به کار می آید.

هنگام ساخت یک application React Native، از packager آن برای ساخت یک index.bundle استفاده می کنیم، که توسط server React Native اجرا می شود. درون index.bundle، ماژول RNHighScore قرارمی گیرد. پس لازم است RCTRootView به محل index.bundle اشاره کند (با NSURL) و آن را به ماژول ربط دهد.

برای debug راحت تر، فراخوانی آن event handler را log می کنیم. سپس رشته حاوی محل کد React Native که درون index.bundle هست درست می کنیم. درنهایت، RCTRootView اصلی را می سازیم. دقت کنید چگونه RNHighScores را به عنوان moduleName که هنگام نوشتن کد برای component React Native در بالا ساختیم، می دهیم.

ابتدا header RCTRootView را import می کنیم.


#import < React/RCTRootView.h >

در اینجا initialProperties هدفی نمایشی دارد و برای اینکه دیتایی برای نمایش در صفحه داشته باشیم. در component React Native، با استفاده از this.props به دیتای آن دسترسی پیدا می کنیم.


- (IBAction)highScoreButtonPressed:(id)sender {
    NSLog(@"High Score Button Pressed");
    NSURL *jsCodeLocation = [NSURL URLWithString:@"http://localhost:8081/index.bundle?platform=ios"];
    RCTRootView *rootView =
      [[RCTRootView alloc] initWithBundleURL: jsCodeLocation
                                  moduleName: @"RNHighScores"
                           initialProperties:
                             @{
                               @"scores" : @[
                                 @{
                                   @"name" : @"Alex",
                                   @"value": @"42"
                                  },
                                 @{
                                   @"name" : @"Joel",
                                   @"value": @"10"
                                 }
                               ]
                             }
                               launchOptions: nil];
    UIViewController *vc = [[UIViewController alloc] init];
    vc.view = rootView;
    [self presentViewController:vc animated:YES completion:nil];
}

توجه کنید RCTRootView initWithURL یک JSC VM جدید را راه می اندازد. برای ساده کردن ارتبط بین view RN ها در بخش های مختلف application native، می توانید چندین view React Native داشته باشید که به یک JS runtime مرتبط اند. برای این کار، به جای استفاده از [RCTRootView alloc] initWithURL، از RCTBridge initWithBundleURL برای ساخت یک bridge استفاده کنید و سپس از RCTRootView initWithBridge استفاده کنید.

در فاز تولید application، NSURL میتواند با کد زیر


[[NSBundle mainBundle] URLForResource:@"main" withExtension:@"jsbundle"];

به یک فایل از پیش bundle شده روی disk اشاره کند. می توانید از react-native-xcode.sh در node_modules/react-native/scripts/ برای ساخت این فایل استفاده کنید.

3. اتصال

لینک جدید در منوی اصلی را به متد event handler جدید وصل کنید.


افزودن React Native به application Objective-C

یکی از آسان ترین روش ها برای این کار این است که view را در storyboard باز کنید و روی لینک جدید راست کلیک کنید. چیزی شبیه Touch Up Inside را انتخاب کنید، آن را به storyboard بکشید و سپس متد ساخته شده را از لیست انتخاب کنید.

تست ادغام

حال همه ی مراحل پایه را برای ادغام React Native با application فعلی خود انجام داده اید. اکنون باید برای ساخت package index.bundle، packager React Native را راه اندازی کنید و server را روی localhost راه اندازی کنید تا application را اجرا کند.

1. افزودن exception برای ATS

برای این کار خطوط زیر را به فایل Info.plist پروژه اضافه می کنیم


						< key>NSAppTransportSecurity< /key >
< key >NSAppTransportSecurity< /key >
< dict >
    < key>NSExceptionDomains< /key > 
    < dict >
        < key >localhost< /key >
        < dict>
            < key>NSTemporaryExceptionAllowsInsecureHTTPLoads< /key>
            < true/>
        < /dict>
    < /dict>
< /dict>

ATS برای کاربران خوب است. حتما قبل از عرضه application آن را فعال کنید.

2. packager را اجرا کنید

برای اجرا application، باید سرور توسعه را راه اندازی کنید. برای این کار، دستور زیر را در root پروژه ی React Native خود اجرا کنید:


$ npm start

3. اجرای application

اگر از Xcode یا ویرایشگر مورد علاقه تان استفاده می کنید، application native iOS خود را به شیوه عادی build و اجرا کنید. میتوانید از طریق Command Line هم آن را اجرا کنید:


# From the root of your project
$ react-native run-ios

در application مثالمان، باید لینک به "High Scores" را ببینیم و وقتی روی آن کلیک کنیم باید component react، render شود.

این صفحه خانه application native است:


افزودن React Native به application Objective-C

این صفحه React Native high score است:


افزودن React Native به application Objective-C

اگر هنگام اجرای برنامه module resolution مشکل دارد این Github issue را برای اطلاعات بیشتر ببینید.

دسترسی به کد

می توانید کدی را که صفحه React Native را به application نمونه اضافه کردیم در Github ببینید.

حالا چه؟!

در این لحظه می توانید توسعه application تان را به روال عادی ادامه دهید. برای مطالعه بیشتر به بخش های آموزش مربوط به debug و اجرای اپلیکیشن ها مراجعه کنید.

استفاده از React Native در یک اپلیکیشن موجود برپایه Swift

مفاهیم کلیدی

  1. dependency ها و ساختار دایرکتوری React Native را راه اندازی کنید.
  2. component های React Native که می خواهید به application خود اضافه کنید را بشناسید.
  3. این component ها را به عنوان dependency ها توسط CocoaPods اضافه کنید.
  4. component های React Native را که مدنظرتان است در جاوااسکریپت توسعه دهید.
  5. یک RCTRootView به application iOS خود اضافه کنید. این view به عنوان container برای component React Native عمل می کند.
  6. سرور React Native را راه اندازی کنید و application native را روی آن اجرا کنید.
  7. بررسی کنید که بخش های React Native application تان به درستی کار می کند.

پیش نیاز ها

دستورالعمل های لازم برای ساخت application با کد native را از بخش شروع توسعه با React Native دنبال کنید و محیط توسعه برای ساخت application React Native برای iOS را راه اندازی کنید.

1. ساختار دایرکتوری را تنظیم کنید

یک پوشه جدید برای پروژه React Native خود ایجاد کنید، سپس پروژه موجود iOS خود را به زیر پوشه / ios کپی کنید.

2. نصب وابستگی های جاوا اسکریپت

به root directory پروژه خود بروید و یک فایل package.json جدید با محتوای زیر ایجاد کنید:


{
  "name": "MyReactNativeApp",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "start": "yarn react-native start"
  }
}

از نصب بودن yarn package manager روی سیستم تان مطمئن شوید.

package های react و react-native را نصب کنید. یک ترمینال باز کنید، به دایرکتوری فایل package.json بروید و دستور زیر را اجرا کنید:


$ yarn add react-native

این دستور یک پیام مشابه پیام زیر چاپ می کند:


warning "react-native@0.52.2" has unmet peer dependency "react@16.2.0".

این به این معناست که باید React را نصب کنید:


$ yarn add react@version_printed_above

Yarn یک پوشه جدید با نام /node_modules ساخته است. این پوشه تمام وابستگی های جاواسکریپتی پروژه را که برای build شدن لازم است ذخیره می کند.

node_modules/ را به فایل .gitignore پروژه اضافه کنید.

نصب CocoaPods

CocoaPods یک ابزار manager package برای توسعه iOS و macOS است. ما از آن برای اضافه کردن کد واقعی React Native framework به صورت محلی به پروژه فعلی استفاده می کنیم.

پیشنهاد می کنیم CocoaPods را از طریق Homebrew نصب کنید:


$ brew install cocoapods

از نظر فنی استفاده نکردن از CocoaPods ممکن است، اما این نیاز به افزودن دستی کتابخانه و linker دارد که این فرایند را بیش از حد پیچیده می کند.

افزودن React Native به application خود

فرض کنیم application مورد نظر بازی 2048 باشد، این منوی اصلی application native بدون React Native است:


افزودن React Native به application Swift

ابزار Command Line برای Xcode

ابزار Command Line را نصب کنید. "Preferences..." را در منوی Xcode انتخاب کنید. به پنل Location بروید و ابزارها را با انتخاب آخرین version از منوی Command Line Tools نصب کنید.


افزودن React Native به application Swift

config وابستگی های CocoaPods

قبل از اینکه React Native را به برنامه خود اضافه کنید، باید تصمیم بگیرید که چه بخش هایی از framework React Native را می خواهید ادغام کنید. ما از CocoaPods برای تعیین اینکه application مان به کدام یک از "subspec" ها وابسته باشد، استفاده خواهیم کرد.

فهرست subspecs در /node_modules/react-native/React.podspec در دسترس است. به طور کلی براساس کاربردشان نامگذاری شده اند. به عنوان مثال، معمولا همیشه زیرمجموعه Core را لازم دارید. این به شما AppRegistry، StyleSheet، View و سایر کتابخانه های مهم React Native را می دهد. اگر می خواهید کتابخانه React Native Text (مثلا برای المان های < Text > ) را اضافه کنید، باید از زیرمجموعه RCTText استفاده کنید. اگر می خواهید کتابخانه تصویر (مثلا برای المان های < Image > ) را را استفاده کنید، به زیرمجموعه RCTImage نیاز خواهید داشت.

در یک فایل Podfile می توانید مشخص کنید برنامه تان به کدام زیرمجموعه dependency دارد. ساده ترین راه ایجاد Podfile با اجرای فرمان init در زیر پوشه / ios پروژه است:


$ pod init

Podfile حاوی تنظیماتی آماده هست که باید بعدا تغییر کنند. فایل نهایی چیزی شبیه زیر خواهد بود:


source 'https://github.com/CocoaPods/Specs.git'
# Required for Swift apps
platform :ios, '8.0'
use_frameworks!
# The target name is most likely the name of your project.
target 'swift-2048' do
  # Your 'node_modules' directory is probably in the root of your project,
  # but if not, adjust the `:path` accordingly
  pod 'React', :path = >  '../node_modules/react-native', :subspecs = >  [
    'Core',
    'CxxBridge', # Include this for RN  > = 0.47
    'DevSupport', # Include this to enable In-App Devmenu if RN  > = 0.43
    'RCTText',
    'RCTNetwork',
    'RCTWebSocket', # needed for debugging
    # Add any other subspecs you want to use in your project
  ]
  # Explicitly include Yoga if you are using RN  > = 0.42.0
  pod "yoga", :path = >  "../node_modules/react-native/ReactCommon/yoga"
  # Third party deps podspec link
  pod 'DoubleConversion', :podspec = >  '../node_modules/react-native/third-party-podspecs/DoubleConversion.podspec'
  pod 'glog', :podspec = >  '../node_modules/react-native/third-party-podspecs/glog.podspec'
  pod 'Folly', :podspec = >  '../node_modules/react-native/third-party-podspecs/Folly.podspec'
end

پس از اینکه فایل را ایجاد کردید، آماده اید که pod را نصب کنید:


$ pod install

خروجی دستور بالا چیزی شبیه زیر است:


Analyzing dependencies
Fetching podspec for `React` from `../node_modules/react-native`
Downloading dependencies
Installing React (0.26.0)
Generating Pods project
Integrating client project
Sending stats
Pod installation complete! There are 3 dependencies from the Podfile and 1 total pod installed.

اگر با خطایی درمورد xcrun مواجه شدید، بررسی کنید در Xcode، در مسیر Preferences > Locations ابزار Command Line تعیین شده است.

اگر با هشداری شبیه


"The swift-2048 [Debug] target overrides the FRAMEWORK_SEARCH_PATHS build setting defined in Pods/Target Support Files/Pods-swift-2048/Pods-swift-2048.debug.xcconfig. This can lead to problems with the CocoaPods installation"

مواجه شدید، اطمینان حاصل کنید که Framework Search Paths در Build Settings برای هم Debug و هم Release فقط حاوی $(inherited) است.

ادغام کد

اکنون میخواهیم application native iOS را تغییردهیم که با React Native ترکیب شود. برای application نمونه 2048، یک صفحه ی React Native با عنوان "High Score" اضافه می کنیم.

component React Native

اولین بخش کدی که می نویسیم کدی به زبان React Native خواهد بود که صفحه ای برای ما می سازد که به application native اضافه می شود.

1. ایجاد فایل index.js

ابتدا، یک فایل خالی به اسم index.js در root پروژه ی React Native خود بسازید.

فایل index.js نقطه شروع application های React Native است، و همیشه لازمش داریم. ممکن است فایل کوچکی باشد که فایل های دیگر را که بخشی از component React Native یا application هستند، require کند، یا ممکن است تمام کدهای لازم را در خود داشته باشد. در مثال ما، همه چیز درون فایل است.

2.افزودن کد React Native

درون index.js، component خود را بسازید. در مثال ما، یک component ساده و یک ی استایل دهی شده، داریم:


						import React from 'react';
import {AppRegistry, StyleSheet, Text, View} from 'react-native';
class RNHighScores extends React.Component {
  render() {
    var contents = this.props['scores'].map((score) => (
      < Text key={score.name}>
        {score.name}:{score.value}
        {'\n'}
      < /Text>
    ));
    return (
      < View style={styles.container}>
        < Text style={styles.highScoresTitle}>2048 High Scores!< /Text>
        < Text style={styles.scores}>{contents}< /Text>
      < /View>
    );
  }
}
const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#FFFFFF',
  },
  highScoresTitle: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
  scores: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  },
});
// Module name
AppRegistry.registerComponent('RNHighScores', () => RNHighScores);

RNHighScores نام ماژولی است که موقع افزودن یک view به React Native از داخل application iOS تان استفاده می شود.

RCTRootView

حال که component React Native را با استفاده از index.js ساختید، باید آن را به یک ViewController موجود یا جدید اضافه کنید. آسانترین راه ساختن یک event path به component و سپس افزودن آن به یک ViewController موجود است.

ما component را به یک view native به نام RCTRootView در ViewController وصل می کنیم که درواقع آن را نگه می دارد.

1. ساخت یک Event Path

می توانید یک لینک جدید به منوی اصلی بازی اضافه کنید که به صفحه ی React Native "High Score" برود.


افزودن React Native به application Swift

2. حال یک handler از لینک داخل منو اضافه می کنیم. یک متد به ViewController اصلی application تان اضافه می شود. اینجاست که RCTRootView به کار می آید.

هنگام ساخت یک application React Native، از packager آن برای ساخت یک index.bundle استفاده می کنیم، که توسط سرور React Native اجرا می شود. درون index.bundle، ماژول RNHighScore قرارمی گیرد. پس لازم است RCTRootView به محل index.bundle اشاره کند (با NSURL) و آن را به ماژول ربط دهد.

برای debug راحت تر، فراخوانی آن event handler را log می کنیم. سپس string حاوی محل کد React Native که درون index.bundle هست درست می کنیم. درنهایت، RCTRootView اصلی را می سازیم. دقت کنید چگونه RNHighScores را به عنوان moduleName که هنگام نوشتن کد برای component React Native در بالا ساختیم، می دهیم.

ابتدا کتابخانه React را import می کنیم.

#import React

در اینجا initialProperties هدفی نمایشی دارد به این منظور که دیتایی در صفحه داشته باشیم. در component React Native، با استفاده از this.props به دیتای آن دسترسی پیدا می کنیم.


@IBAction func highScoreButtonTapped(sender : UIButton) {
  NSLog("Hello")
  let jsCodeLocation = URL(string: "http://localhost:8081/index.bundle?platform=ios")
  let mockData:NSDictionary = ["scores":
      [
          ["name":"Alex", "value":"42"],
          ["name":"Joel", "value":"10"]
      ]
  ]
  let rootView = RCTRootView(
      bundleURL: jsCodeLocation,
      moduleName: "RNHighScores",
      initialProperties: mockData as [NSObject : AnyObject],
      launchOptions: nil
  )
  let vc = UIViewController()
  vc.view = rootView
  self.present(vc, animated: true, completion: nil)
}

توجه کنید bundleURL یک JSC VM جدید را راه می اندازد. برای ساده کردن ارتباط بین view RN های در بخش های مختلف application native، می توانید چندین view React Native داشته باشید که به یک JS runtime مرتبط اند. برای این کار، به جای استفاده از RCTRootView bundleURL ، از RCTBridge initWithBundleURL برای ساخت یک bridge استفاده کنید و سپس از RCTRootView initWithBridge استفاده کنید.

در فاز تولید application، NSURL میتواند با کد


let mainBundle = NSBundle(URLForResource: "main" withExtension:"jsbundle")

به یک فایل از پیش bundle شده روی disk اشاره کند. می توانید از react-native-xcode.sh در node_modules/react-native/scripts/ برای ساخت این فایل استفاده کنید.

3. اتصال

لینک جدید در منوی اصلی را به متد event handler جدید وصل کنید.


افزودن React Native به application Swift

یکی از آسان ترین روش ها برای این کار این است که view را در storyboard باز کنید و روی لینک جدید راست کلیک کنید. چیزی شبیه Touch Up Inside را انتخاب کنید، آن را به storyboard بکشید و سپس متد ساخته شده را از لیست انتخاب کنید.

تست ادغام

حال همه ی مراحل پایه را برای ادغام React Native با application فعلی خود انجام داده اید. اکنون باید برای ساخت package index.bundle، packager React Native را راه اندازی کنید و server را روی localhost راه اندازی کنید تا application را اجرا کند.

1. افزودن exception برای ATS

برای این کار خطوط زیر را به فایل Info.plist پروژه اضافه می کنیم


< key>NSAppTransportSecurity< /key>
< dict>
    < key>NSExceptionDomains< /key>
    < dict>
        < key>localhost< /key>
        < dict>
            < key>NSTemporaryExceptionAllowsInsecureHTTPLoads< /key>
            < true/>
        < /dict>
    < /dict>
< /dict>
						

ATS برای کاربران خوب است. حتما قبل از عرضه application آن را فعال کنید.

2. packager را اجرا کنید

برای اجرا application، باید سرور توسعه را راه اندازی کنید. برای این کار، دستور زیر را در root پروژه ی React Native خود اجرا کنید:


$ npm start

3. اجرای application

اگر از Xcode یا ویرایشگر مورد علاقه تان استفاده می کنید، application native iOS خود را به شیوه عادی build و اجرا کنید. می توانید از طریق Command Line هم آن را اجرا کنید:


# From the root of your project
$ react-native run-ios

در application نمونه، باید لینک به "High Scores" را ببینیم و وقتی روی آن کلیک کنیم باید component React، render شود.

این صفحه خانه application native است:


افزودن React Native به application Swift

این صفحه React Native high score است:


افزودن React Native به application Swift

اگر هنگام اجرای برنامه module resolution مشکل دارد این Github issue را برای اطلاعات بیشتر ببینید.

دسترسی به کد

می توانید کدی را که صفحه React Native را به application نمونه اضافه کردیم در Github ببینید.

حالا چه؟!

در این لحظه می توانید توسعه application تان را به روال عادی ادامه دهید. برای مطالعه بیشتر به بخش های آموزش مربوط به debug و اجرای اپلیکیشن ها مراجعه کنید.


استفاده از React Native در یک اپلیکیشن موجود برپایه Android

مفاهیم کلیدی

  1. مراحل اصلی ادغام component های React Native با application iOS :
  2. dependency ها و ساختار دایرکتوری React Native را راه اندازی کنید.
  3. component های React Native را که مد نظرتان در جاوااسکریپت توسعه دهید.
  4. یک ReactRootView به application android خود اضافه کنید. این view به عنوان container برای component React Native عمل می کند.
  5. سرور React Native را راه اندازی کنید و application خود را اجرا کنید.
  6. بررسی کنید که بخش های React Native application تان به درستی کار می کند.

پیش نیاز ها

دستورالعمل های لازم برای ساخت application با کد native را از بخش شروع توسعه با React Native دنبال کنید و محیط توسعه برای ساخت application React Native برای android را راه اندازی کنید.

1. ساختار دایرکتوری را تنظیم کنید

یک پوشه جدید برای پروژه React Native خود ایجاد کنید، سپس پروژه موجود android خود را به زیر پوشه /android کپی کنید.

2. نصب dependency های جاوا اسکریپت

به root directory پروژه خود بروید و یک فایل package.json جدید با محتوای زیر ایجاد کنید:


{
  "name": "MyReactNativeApp",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "start": "yarn react-native start"
  }
}

از نصب بودن yarn package manager روی سیستم تان مطمئن شوید.

package های react و react-native را نصب کنید. یک ترمینال باز کنید، به دایرکتوری فایل package.json بروید و دستور زیر را اجرا کنید:


$ yarn add react-native

این دستور یک پیام مشابه پیام زیر چاپ می کند:


warning "react-native@0.52.2" has unmet peer dependency "react@16.2.0".

این به این معناست که باید react را نصب کنید:


$ yarn add react@version_printed_above

Yarn یک پوشه جدید با نام /node_modules ساخته است. این پوشه تمام وابستگی های جاواسکریپتی پروژه را که برای build شدن لازم است ذخیره می کند.

node_modules/ را به فایل .gitignore پروژه اضافه کنید.

افزودن React Native به application خود

تنظیم maven

وابستگی های پروژه React Native خود را به فایل build.gradle اضافه کنید:


dependencies {
    implementation 'com.android.support:appcompat-v7:27.1.1'
    ...
    implementation "com.facebook.react:react-native:+" // From node_modules
}

اگر می خواهید حتما همیشه از یک version خاص React Native در پروژه تان استفاده می کنید، به جای + ، نسخه React Native که با npm دانلود کرده اید را بگذارید.

یک رکورد برای local directory مربوط به React Native maven به فایل build.gradle اضافه کنید. آن را به قسمت "allprojects"، بالای بقیه ی repository های maven اضافه کنید:


allprojects {
    repositories {
        maven {
            // All of React Native (JS, Android binaries) is installed from npm
            url "$rootDir/../node_modules/react-native/android"
        }
        ...
    }
    ...
}

چک کنید مسیر درست باشد! پس از sync کردن gradle در Android Studio نباید به خطای “Failed to resolve: com.facebook.react:react-native:0.x.x" بخورید.

Permission Configuration

بررسی کنید که در AndroidManifest.xml مجوز اینترنت را دارید:


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

اگر نیاز دارید به DevSettingsActivity دسترسی پیدا کنید، به AndroidManifest.xml اضافه کنید:

< activity android:name="com.facebook.react.devsupport.DevSettingsActivity" />

این مجوز فقط در مد Dev هنگام reload جاوااسکریپت از سرور توسعه، استفاده می شود. می توانید در build release ها آن را بردارید.

+Cleartext Traffic - API level 28

از اندروید 9 (API level 28) به بعد، cleartext traffic به طور پیش فرض غیرفعال است؛ این اجازه نمی دهد application شما به Packager React Native وصل شود. تغییرات زیر cleartext traffic را در debug build ها فعال می کند.

1. در فایل AndroidManifest.xml تغییر زیر را اعمال کنید:



< application
  android:usesCleartextTraffic="true" tools:targetApi="28" >
  
< /application>


این کار برای build release ها لازم نیست.

برای مطالعه بیشتر درمورد تنظیم امنیت شبکه و cleartext traffic policy این لینک مراجعه کنید.

اکنون می خواهیم application native خود را تغییردهیم که با React Native ترکیب شود.

افزودن React Native component

اولین بخش کدی که می نویسیم کدی به زبان React Native خواهد بود که صفحه "High Score" را برای ما می سازد که قرار است به application native اضافه شود.

1. ایجاد فایل index.js

ابتدا، یک فایل خالی به اسم index.js در root پروژه ی React Native خود بسازید.

فایل index.js نقطه شروع application های React Native است، و همیشه لازمش داریم. ممکن است فایل کوچکی باشد که فایل های دیگر را که بخشی از Component React Native یا application هستند، require کند، یا ممکن است تمام کدهای لازم را در خود داشته باشد. در مثال ما، همه چیز درون فایل است.

2.افزودن کد React Native

درون index.js، کامپوننت خود را بسازید. در مثال ما، یک component ساده Text و یک view ی استایل دهی شده، داریم:


import React from 'react';
import {AppRegistry, StyleSheet, Text, View} from 'react-native';
class HelloWorld extends React.Component {
  render() {
    return (
                        < view style="{styles.container}">
                        < text style="{styles.hello}">Hello, World< /text>
      < /view>
    );
  }
}
var styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
  },
  hello: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
});
AppRegistry.registerComponent('MyReactNativeApp', () = >  HelloWorld);

اگر application برای اجرا روی پلتفرم های با اندروید API level 23 و بالاتر است، از داشتن مجوز android.permission.SYSTEM_ALERT_WINDOW برای development build اطمینان حاصل کنید. می توانید با Settings.canDrawOverlays(this); آن را چک کنید. از آنجا که خطاهای حین توسعه ی React Native باید روی همه ی پنجره ها نمایش داده شود این مجوز لازم است. مطابق روال Permission System که در اندروید API level 23 (Android M) معرفی شد، کاربر باید آن را تایید کند. برای این کار، کد زیر را به متد onCreate() در Activity خود اضافه کنید:


private final int OVERLAY_PERMISSION_REQ_CODE = 1;  // Choose any value
...
if (Build.VERSION.SDK_INT  > = Build.VERSION_CODES.M) {
    if (!Settings.canDrawOverlays(this)) {
        Intent intent = new Intent(Settings.ACTION_MANAGE_OVERLAY_PERMISSION,
                                   Uri.parse("package:" + getPackageName()));
        startActivityForResult(intent, OVERLAY_PERMISSION_REQ_CODE);
    }
}

در آخر، متد onActivityResult() (به شکلی که در کد زیر نشان داده شده) باید override شود و تایید یا رد دسترسی ها را مدیریت کند. بعلاوه، برای ادغام ماژول های native که از startActivityForResult استفاده می کنند، باید نتیجه را به متد onActivityResult از object ReactInstanceManager بفرستیم:


@Override
protected void onActivityResult(int requestCode, int resultCode, Intent data) {
    if (requestCode == OVERLAY_PERMISSION_REQ_CODE) {
        if (Build.VERSION.SDK_INT  > = Build.VERSION_CODES.M) {
            if (!Settings.canDrawOverlays(this)) {
                // SYSTEM_ALERT_WINDOW permission not granted
            }
        }
    }
    mReactInstanceManager.onActivityResult( this, requestCode, resultCode, data );
}

ReactRootView

زمان آن رسیده که به پروژه کد native اضافه کنیم، React Native runtime را راه اندازی کنیم و به آن بگوییم component جاوااسکریپتی مان را render کند. برای این کار، یک Activity می سازیم که یک ReactRootView بسازد، application react را درونش start کند و آن را به عنوان view اصلی set کند. اگر برای پلتفرم های اندروید > 5 کد می نویسید، ازکلاس AppCompatActivity از package android.support:appcompat به جای Activity استفاده کنید.


public class MyReactActivity extends Activity implements DefaultHardwareBackBtnHandler {
    private ReactRootView mReactRootView;
    private ReactInstanceManager mReactInstanceManager;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        mReactRootView = new ReactRootView(this);
        mReactInstanceManager = ReactInstanceManager.builder()
                .setApplication(getApplication())
                .setCurrentActivity(this)
                .setBundleAssetName("index.android.bundle")
                .setJSMainModulePath("index")
                .addPackage(new MainReactPackage())
                .setUseDeveloperSupport(BuildConfig.DEBUG)
                .setInitialLifecycleState(LifecycleState.RESUMED)
                .build();
        // The string here (e.g. "MyReactNativeApp") has to match
        // the string in AppRegistry.registerComponent() in index.js
        mReactRootView.startReactApplication(mReactInstanceManager, "MyReactNativeApp", null);
        setContentView(mReactRootView);
    }
    @Override
    public void invokeDefaultOnBackPressed() {
        super.onBackPressed();
    }
}

اگر از یکی از starter kit های React Native استفاده می کنید، "HelloWorld" را با رشته ای که درون فایل index.js هست (اولین آرگومان متد AppRegistry.registerComponent() ) جایگزین کنید.

اگر از Android Studio استفاده می کنید، با Alt + Enter ، import های لازم را به کلاس MyReactActivity اضافه کنید . دقت کنید که از BuildConfig پکیج خود استفاده کنید، نه از BuildConfig پکیج facebook.

تم MyReactActivity را به Theme.AppCompat.Light.NoActionBar تنظیم می کنیم چرا که بعضی component های React Native به این تم وابسته است:


						< activity android:name=".MyReactActivity" android:label="@string/app_name" android:theme="@style/Theme.AppCompat.Light.NoActionBar">
< /activity>

یک ReactInstanceManager می تواند بین چند activity یا fragment به اشتراک گذاشته شود. می توانید ReactFragment یا ReactActivity خودتان را بسازید، و یک singleton holder برای نگه داری یک ReactInstanceManager داشته باشید. وقتی به ReactInstanceManager احتیاج دارید (برای اتصال ReactInstanceManager به چرخه حیات آن Activity ها یا fragment ها) از آن که singleton در اختیار می گذارد، استفاده کنید.

حال باید چند متد callback مربوط به چرخه حیات activity را به ReactInstanceManager و ReactRootView پاس دهیم:


@Override
protected void onPause() {
    super.onPause();
    if (mReactInstanceManager != null) {
        mReactInstanceManager.onHostPause(this);
    }
}
@Override
protected void onResume() {
    super.onResume();
    if (mReactInstanceManager != null) {
        mReactInstanceManager.onHostResume(this, this);
    }
}
@Override
protected void onDestroy() {
    super.onDestroy();
    if (mReactInstanceManager != null) {
        mReactInstanceManager.onHostDestroy(this);
    }
    if (mReactRootView != null) {
        mReactRootView.unmountReactApplication();
    }
}

بعلاوه باید event های دکمه را هم به React Native پاس بدهیم:


@Override
 public void onBackPressed() {
    if (mReactInstanceManager != null) {
        mReactInstanceManager.onBackPressed();
    } else {
        super.onBackPressed();
    }
}

این به جاوااسکریپت امکان کنترل این را می دهد که درصورت فشردن دکمه سخت افزاری بازگشت روی موبایل، چه اتفاقی بیوفتد. اگر جاوااسکریپت این موضوع را کنترل نکند، متد invokeDefaultOnBackPressed فراخوانی می شود و به طور پیش فرض به حیات Activity پایان می دهد. درانتها، باید dev menu را هم داشته باشیم. به طور پیش فرض، این منو با تکان دادن device فعال می شود، اما برای شبیه سازها این موضوع به کار نمی آید. ما آن را هنگام فشردن دکمه ی سخت افزاری menu روی موبایل (میانبر Ctrl + M در شبیه ساز android) نمایش می دهیم:


@Override
public boolean onKeyUp(int keyCode, KeyEvent event) {
    if (keyCode == KeyEvent.KEYCODE_MENU && mReactInstanceManager != null) {
        mReactInstanceManager.showDevOptionsDialog();
        return true;
    }
    return super.onKeyUp(keyCode, event);
}

حال activity آماده ی اجرای کدهای جاوااسکریپتی است.

تست ادغام

حال همه ی مراحل پایه را برای ادغام React Native با application فعلی خود انجام داده اید. اکنون باید برای ساخت package index.bundle، packager React Native را راه اندازی کنید و server را روی localhost راه اندازی کنید تا application را اجرا کند.

1 . packager را اجرا کنید

برای اجرای application، باید سرور توسعه را راه اندازی کنید. برای این کار، دستور زیر را در root پروژه ی React Native خود اجرا کنید:


$ yarn start 

2 . اجرای application

application android خود را به شیوه عادی build و اجرا کنید.

وقتی Activity که با react ساخته اید باز شد، باید کد جاوااسکریپت نوشته شده را از سرور توسعه load کند و نمایش دهد:


افزودن React Native به application android

ساخت یک release build در Android Studio

می توانید از Android Studio برای ساخت build release هم استفاده کنید! روال کار به سادگی ساخت release build برای application های android است. تنها یک مرحله اضافه دارد که باید قبل از هر release build انجام شود. باید دستور زیر را برای ایجاد bundle React Native اجرا کنید:


$ react-native bundle --platform android --dev false --entry-file index.js --bundle-output android/com/your-company-name/app-package-name/src/main/assets/index.android.bundle --assets-dest android/com/your-company-name/app-package-name/src/main/res/

حالا چه؟!

در این لحظه می توانید توسعه application تان را به روال عادی ادامه دهید. به مستندات مربوط به debug و اجرای اپلیکیشن برای مطالعه بیشتر مراجعه کنید.

  • 564
  •    0
  • تاریخ ارسال :   1398/06/04

دانشجویان گرامی اگر این مطلب برای شما مفید بود لطفا ما را در GooglePlus محبوب کنید
رمز عبور: tahlildadeh.com یا www.tahlildadeh.com
ارسال دیدگاه نظرات کاربران
شماره موبایل دیدگاه
عنوان پست الکترونیک

ارسال

آموزشگاه برنامه نویسی تحلیل داده
آموزشگاه برنامه نویسی تحلیل داده

تمامی حقوق این سایت متعلق به آموزشگاه تحلیل داده می باشد .