Triển khai hàng đợi trong javascript

Mô-đun gốc và Thành phần gốc là các công nghệ ổn định của chúng tôi được sử dụng bởi kiến ​​trúc cũ. Chúng sẽ không còn được dùng nữa trong tương lai khi Kiến trúc mới ổn định. Kiến trúc mới sử dụng Mô-đun gốc Turbo và Cấu phần gốc vải để đạt được kết quả tương tự

Chào mừng bạn đến với Mô-đun bản địa dành cho iOS. Vui lòng bắt đầu bằng cách đọc Phần giới thiệu mô-đun gốc để biết phần giới thiệu về mô-đun gốc là gì

Tạo một mô-đun gốc lịch

Trong hướng dẫn sau đây, bạn sẽ tạo một mô-đun gốc,

const {CalendarModuleFoo} = ReactNative.NativeModules;

7, mô-đun này sẽ cho phép bạn truy cập các API lịch của Apple từ JavaScript. Cuối cùng, bạn sẽ có thể gọi

const {CalendarModuleFoo} = ReactNative.NativeModules;

8 từ JavaScript, gọi một phương thức gốc để tạo sự kiện lịch

Cài đặt

Để bắt đầu, hãy mở dự án iOS trong ứng dụng React Native của bạn trong Xcode. Bạn có thể tìm thấy dự án iOS của mình tại đây trong ứng dụng React Native

Hình ảnh về nơi bạn có thể tìm thấy dự án iOS của mình

Chúng tôi khuyên bạn nên sử dụng Xcode để viết mã gốc của mình. Xcode được xây dựng để phát triển iOS và việc sử dụng nó sẽ giúp bạn nhanh chóng giải quyết các lỗi nhỏ hơn như cú pháp mã

Tạo tệp mô-đun gốc tùy chỉnh

Bước đầu tiên là tạo các tệp triển khai và tiêu đề mô-đun gốc tùy chỉnh chính của chúng tôi. Tạo một tệp mới có tên là

const {CalendarModuleFoo} = ReactNative.NativeModules;

9

Hình ảnh tạo tệp mô-đun gốc tùy chỉnh trong cùng thư mục với AppDelegate

và thêm phần sau vào nó

//  RCTCalendarModule.h
#import <React/RCTBridgeModule.h>
@interface RCTCalendarModule : NSObject <RCTBridgeModule>
@end

Bạn có thể sử dụng bất kỳ tên nào phù hợp với mô-đun gốc mà bạn đang xây dựng. Đặt tên cho lớp là

// Without passing in a name this will export the native module name as the Objective-C class name with “RCT” removed
RCT_EXPORT_MODULE();

0 vì bạn đang tạo mô-đun gốc lịch. Vì ObjC không hỗ trợ cấp độ ngôn ngữ cho các không gian tên như Java hoặc C++, nên quy ước là thêm vào trước tên lớp một chuỗi con. Đây có thể là tên viết tắt của tên ứng dụng hoặc tên cơ sở hạ tầng của bạn. RCT, trong ví dụ này, đề cập đến React

Như bạn có thể thấy bên dưới, lớp CalendarModule triển khai giao thức

// Without passing in a name this will export the native module name as the Objective-C class name with “RCT” removed
RCT_EXPORT_MODULE();

1. Mô-đun gốc là một lớp Objective-C triển khai giao thức

// Without passing in a name this will export the native module name as the Objective-C class name with “RCT” removed
RCT_EXPORT_MODULE();

1

Tiếp theo, hãy bắt đầu triển khai mô-đun gốc. Tạo tệp triển khai tương ứng,

// Without passing in a name this will export the native module name as the Objective-C class name with “RCT” removed
RCT_EXPORT_MODULE();

3, trong cùng một thư mục và bao gồm nội dung sau

________số 8_______

Tên mô-đun

Hiện tại, mô-đun gốc

// Without passing in a name this will export the native module name as the Objective-C class name with “RCT” removed
RCT_EXPORT_MODULE();

3 của bạn chỉ bao gồm macro

// Without passing in a name this will export the native module name as the Objective-C class name with “RCT” removed
RCT_EXPORT_MODULE();

5, macro này sẽ xuất và đăng ký lớp mô-đun gốc với React Native. Macro

// Without passing in a name this will export the native module name as the Objective-C class name with “RCT” removed
RCT_EXPORT_MODULE();

5 cũng có một đối số tùy chọn chỉ định tên mà mô-đun sẽ có thể truy cập được như trong mã JavaScript của bạn

Đối số này không phải là một chuỗi ký tự. Trong ví dụ dưới đây,

// Without passing in a name this will export the native module name as the Objective-C class name with “RCT” removed
RCT_EXPORT_MODULE();

7 được thông qua, không phải

// Without passing in a name this will export the native module name as the Objective-C class name with “RCT” removed
RCT_EXPORT_MODULE();

8

// To export a module named CalendarModuleFoo
RCT_EXPORT_MODULE(CalendarModuleFoo);

Sau đó, mô-đun gốc có thể được truy cập trong JS như thế này

const {CalendarModuleFoo} = ReactNative.NativeModules;

Nếu bạn không chỉ định tên, tên mô-đun JavaScript sẽ khớp với tên lớp Objective-C, với mọi tiền tố "RCT" hoặc "RK" bị xóa

Hãy làm theo ví dụ dưới đây và gọi

// Without passing in a name this will export the native module name as the Objective-C class name with “RCT” removed
RCT_EXPORT_MODULE();

5 mà không có bất kỳ đối số nào. Do đó, mô-đun sẽ được tiếp xúc với React Native bằng cách sử dụng tên

const {CalendarModuleFoo} = ReactNative.NativeModules;

7, vì đó là tên lớp Objective-C, đã loại bỏ RCT

// Without passing in a name this will export the native module name as the Objective-C class name with “RCT” removed
RCT_EXPORT_MODULE();

Sau đó, mô-đun gốc có thể được truy cập trong JS như thế này

const {CalendarModule} = ReactNative.NativeModules;

Xuất phương thức gốc sang JavaScript

React Native sẽ không hiển thị bất kỳ phương thức nào trong mô-đun gốc cho JavaScript trừ khi được thông báo rõ ràng với. Điều này có thể được thực hiện bằng cách sử dụng macro

const {CalendarModule} = ReactNative.NativeModules;

1. Các phương thức được viết trong macro

const {CalendarModule} = ReactNative.NativeModules;

1 là không đồng bộ và do đó, kiểu trả về luôn bị vô hiệu. Để chuyển kết quả từ phương thức

const {CalendarModule} = ReactNative.NativeModules;

1 sang JavaScript, bạn có thể sử dụng lệnh gọi lại hoặc phát ra sự kiện (được trình bày bên dưới). Hãy tiếp tục và thiết lập một phương thức gốc cho mô-đun gốc

const {CalendarModuleFoo} = ReactNative.NativeModules;

7 của chúng ta bằng cách sử dụng macro

const {CalendarModule} = ReactNative.NativeModules;

1. Gọi nó là

const {CalendarModule} = ReactNative.NativeModules;

6 và bây giờ nó nhận các đối số tên và vị trí dưới dạng chuỗi. Các tùy chọn loại đối số sẽ được đề cập ngay sau đây

RCT_EXPORT_METHOD(createCalendarEvent:(NSString *)name location:(NSString *)location)
{
}

Xin lưu ý rằng macro

const {CalendarModule} = ReactNative.NativeModules;

1 sẽ không cần thiết với TurboModules trừ khi phương pháp của bạn dựa trên chuyển đổi đối số RCT (xem các loại đối số bên dưới). Cuối cùng, React Native sẽ loại bỏ

const {CalendarModule} = ReactNative.NativeModules;

8, vì vậy chúng tôi không khuyến khích mọi người sử dụng

const {CalendarModule} = ReactNative.NativeModules;

9. Thay vào đó, bạn có thể thực hiện chuyển đổi đối số trong nội dung phương thức

Trước khi bạn xây dựng chức năng của phương thức

const {CalendarModule} = ReactNative.NativeModules;

6, hãy thêm nhật ký bảng điều khiển vào phương thức để bạn có thể xác nhận rằng nó đã được gọi từ JavaScript trong ứng dụng React Native của bạn. Sử dụng các API

RCT_EXPORT_METHOD(createCalendarEvent:(NSString *)name location:(NSString *)location)
{
}

1 từ React. Hãy nhập tiêu đề đó ở đầu tệp của bạn rồi thêm lệnh gọi nhật ký

#import <React/RCTLog.h>
RCT_EXPORT_METHOD(createCalendarEvent:(NSString *)name location:(NSString *)location)
{
 RCTLogInfo(@"Pretending to create an event %@ at %@", name, location);
}

Phương thức đồng bộ

Bạn có thể sử dụng

RCT_EXPORT_METHOD(createCalendarEvent:(NSString *)name location:(NSString *)location)
{
}

2 để tạo phương thức gốc đồng bộ

RCT_EXPORT_BLOCKING_SYNCHRONOUS_METHOD(getName)
{
return [[UIDevice currentDevice] name];
}

Kiểu trả về của phương thức này phải thuộc kiểu đối tượng (id) và phải được tuần tự hóa thành JSON. Điều này có nghĩa là hook chỉ có thể trả về các giá trị nil hoặc JSON (e. g. NSNumber, NSString, NSArray, NSDictionary)

Hiện tại, chúng tôi không khuyên bạn nên sử dụng các phương thức đồng bộ, vì việc gọi các phương thức đồng bộ có thể có các hình phạt hiệu suất mạnh và gây ra các lỗi liên quan đến luồng cho các mô-đun gốc của bạn. Ngoài ra, xin lưu ý rằng nếu bạn chọn sử dụng

RCT_EXPORT_METHOD(createCalendarEvent:(NSString *)name location:(NSString *)location)
{
}

2, ứng dụng của bạn không thể sử dụng trình gỡ lỗi của Google Chrome nữa. Điều này là do các phương thức đồng bộ yêu cầu máy ảo JS chia sẻ bộ nhớ với ứng dụng. Đối với trình gỡ lỗi Google Chrome, React Native chạy bên trong JS VM trong Google Chrome và giao tiếp không đồng bộ với thiết bị di động qua WebSockets

Kiểm tra những gì bạn đã xây dựng

Tại thời điểm này, bạn đã thiết lập giàn giáo cơ bản cho mô-đun gốc của mình trong iOS. Kiểm tra điều đó bằng cách truy cập mô-đun gốc và gọi phương thức đã xuất của nó trong JavaScript

Tìm một vị trí trong ứng dụng của bạn mà bạn muốn thêm lệnh gọi vào phương thức

const {CalendarModule} = ReactNative.NativeModules;

6 của mô-đun gốc. Dưới đây là ví dụ về thành phần,

RCT_EXPORT_METHOD(createCalendarEvent:(NSString *)name location:(NSString *)location)
{
}

5 bạn có thể thêm vào ứng dụng của mình. Bạn có thể gọi mô-đun gốc bên trong hàm

RCT_EXPORT_METHOD(createCalendarEvent:(NSString *)name location:(NSString *)location)
{
}

7 của

RCT_EXPORT_METHOD(createCalendarEvent:(NSString *)name location:(NSString *)location)
{
}

5

import React from 'react';
import {NativeModules, Button} from 'react-native';

const NewModuleButton = () => {
  const onPress = () => {
    console.log('We will invoke the native module here!');
  };

  return (
    <Button
      title="Click to invoke your native module!"
      color="#841584"
      onPress={onPress}
    />
  );
};

export default NewModuleButton;

Để truy cập mô-đun gốc của bạn từ JavaScript, trước tiên bạn cần nhập

RCT_EXPORT_METHOD(createCalendarEvent:(NSString *)name location:(NSString *)location)
{
}

8 từ React Native

// RCTCalendarModule.m
#import "RCTCalendarModule.h"

@implementation RCTCalendarModule

// To export a module named RCTCalendarModule
RCT_EXPORT_MODULE();

@end

0

Sau đó, bạn có thể truy cập mô-đun gốc

const {CalendarModuleFoo} = ReactNative.NativeModules;

7 của

RCT_EXPORT_METHOD(createCalendarEvent:(NSString *)name location:(NSString *)location)
{
}

8

// RCTCalendarModule.m
#import "RCTCalendarModule.h"

@implementation RCTCalendarModule

// To export a module named RCTCalendarModule
RCT_EXPORT_MODULE();

@end

1

Bây giờ bạn đã có sẵn mô-đun gốc CalendarModule, bạn có thể gọi phương thức gốc của mình

const {CalendarModule} = ReactNative.NativeModules;

6. Bên dưới nó được thêm vào phương thức

RCT_EXPORT_METHOD(createCalendarEvent:(NSString *)name location:(NSString *)location)
{
}

7 trong

RCT_EXPORT_METHOD(createCalendarEvent:(NSString *)name location:(NSString *)location)
{
}

5

// RCTCalendarModule.m
#import "RCTCalendarModule.h"

@implementation RCTCalendarModule

// To export a module named RCTCalendarModule
RCT_EXPORT_MODULE();

@end

2

Bước cuối cùng là xây dựng lại ứng dụng React Native để bạn có thể có mã gốc mới nhất (với mô-đun gốc mới của bạn. ) có sẵn. Trong dòng lệnh của bạn, nơi đặt ứng dụng gốc phản ứng, hãy chạy như sau

// RCTCalendarModule.m
#import "RCTCalendarModule.h"

@implementation RCTCalendarModule

// To export a module named RCTCalendarModule
RCT_EXPORT_MODULE();

@end

3

Xây dựng khi bạn lặp lại

Khi bạn làm việc thông qua các hướng dẫn này và lặp lại trên mô-đun gốc của mình, bạn sẽ cần thực hiện xây dựng lại ứng dụng gốc của mình để truy cập các thay đổi gần đây nhất của bạn từ JavaScript. Điều này là do mã mà bạn đang viết nằm trong phần gốc của ứng dụng của bạn. Mặc dù gói metro của React Native có thể theo dõi các thay đổi trong JavaScript và xây dựng lại gói JS một cách nhanh chóng cho bạn, nhưng nó sẽ không làm như vậy đối với mã gốc. Vì vậy, nếu bạn muốn kiểm tra các thay đổi gốc mới nhất của mình, bạn cần xây dựng lại bằng cách sử dụng lệnh

#import <React/RCTLog.h>
RCT_EXPORT_METHOD(createCalendarEvent:(NSString *)name location:(NSString *)location)
{
 RCTLogInfo(@"Pretending to create an event %@ at %@", name, location);
}

4

Tóm tắt✨

Bây giờ bạn có thể gọi phương thức

const {CalendarModule} = ReactNative.NativeModules;

6 trên mô-đun gốc của mình trong JavaScript. Vì bạn đang sử dụng

RCT_EXPORT_METHOD(createCalendarEvent:(NSString *)name location:(NSString *)location)
{
}

1 trong hàm, nên bạn có thể xác nhận phương thức gốc của mình đang được gọi bằng cách xem bảng điều khiển JS trong Chrome hoặc trình gỡ lỗi ứng dụng di động Flipper. Bạn sẽ thấy thông báo

#import <React/RCTLog.h>
RCT_EXPORT_METHOD(createCalendarEvent:(NSString *)name location:(NSString *)location)
{
 RCTLogInfo(@"Pretending to create an event %@ at %@", name, location);
}

7 của mình mỗi khi bạn gọi phương thức mô-đun gốc

Hình ảnh nhật ký iOS trong Flipper

Tại thời điểm này, bạn đã tạo một mô-đun gốc iOS và gọi một phương thức trên mô-đun đó từ JavaScript trong ứng dụng React Native của bạn. Bạn có thể đọc tiếp để tìm hiểu thêm về những thứ như loại đối số mà phương thức mô-đun gốc của bạn sử dụng và cách thiết lập các cuộc gọi lại và lời hứa trong mô-đun gốc của bạn

Ngoài một mô-đun gốc lịch

Xuất mô-đun gốc tốt hơn

Nhập mô-đun gốc của bạn bằng cách kéo nó ra khỏi

RCT_EXPORT_METHOD(createCalendarEvent:(NSString *)name location:(NSString *)location)
{
}

8 như trên hơi rắc rối

Để giúp người tiêu dùng mô-đun gốc của bạn không phải làm điều đó mỗi khi họ muốn truy cập mô-đun gốc của bạn, bạn có thể tạo trình bao bọc JavaScript cho mô-đun. Tạo một tệp JavaScript mới có tên là NativeCalendarModule. js với nội dung sau

// RCTCalendarModule.m
#import "RCTCalendarModule.h"

@implementation RCTCalendarModule

// To export a module named RCTCalendarModule
RCT_EXPORT_MODULE();

@end

4

Tệp JavaScript này cũng trở thành một vị trí tốt để bạn thêm bất kỳ chức năng phụ nào của JavaScript. Ví dụ: nếu bạn sử dụng hệ thống kiểu như TypeScript, bạn có thể thêm chú thích kiểu cho mô-đun gốc của mình tại đây. Mặc dù React Native chưa hỗ trợ an toàn kiểu Native to JS, nhưng với các chú thích kiểu này, tất cả mã JS của bạn sẽ an toàn kiểu. Các chú thích này cũng sẽ giúp bạn dễ dàng chuyển sang các mô-đun gốc an toàn loại hơn. Dưới đây là một ví dụ về việc thêm loại an toàn vào Mô-đun Lịch

// RCTCalendarModule.m
#import "RCTCalendarModule.h"

@implementation RCTCalendarModule

// To export a module named RCTCalendarModule
RCT_EXPORT_MODULE();

@end

5

Trong các tệp JavaScript khác của bạn, bạn có thể truy cập mô-đun gốc và gọi phương thức của nó như thế này

// RCTCalendarModule.m
#import "RCTCalendarModule.h"

@implementation RCTCalendarModule

// To export a module named RCTCalendarModule
RCT_EXPORT_MODULE();

@end

6

Lưu ý điều này giả định rằng địa điểm bạn đang nhập

const {CalendarModuleFoo} = ReactNative.NativeModules;

7 nằm trong cùng hệ thống phân cấp với

RCT_EXPORT_BLOCKING_SYNCHRONOUS_METHOD(getName)
{
return [[UIDevice currentDevice] name];
}

0. Vui lòng cập nhật nhập tương đối khi cần thiết

Các loại đối số

Khi một phương thức mô-đun gốc được gọi trong JavaScript, React Native sẽ chuyển đổi các đối số từ các đối tượng JS thành các đối tượng tương tự đối tượng Objective-C/Swift của chúng. Vì vậy, ví dụ: nếu phương thức Mô-đun gốc Objective-C của bạn chấp nhận NSNumber, thì trong JS, bạn cần gọi phương thức đó bằng một số. React Native sẽ xử lý chuyển đổi cho bạn. Dưới đây là danh sách các loại đối số được hỗ trợ cho các phương thức mô-đun gốc và các JavaScript tương đương mà chúng ánh xạ tới

Mục tiêu-CJavaScriptNSStringstring, ?stringBOOLbooleanNSNumber?booleandoublenumberNSNumber?numberNSArrayArray, ?ArrayNSDictionaryObject, ?ObjectRCTResponseSenderBlockFunction (thành công)RCTResponseSenderBlock, RCTResponseErrorBlockFunction (thất bại)RCTPromiseResolveBlock, RCTPromiseRejectBlockPromise

Các loại sau hiện được hỗ trợ nhưng sẽ không được hỗ trợ trong TurboModules. Vui lòng tránh sử dụng chúng

• Chức năng (lỗi) -> RCTResponseErrorBlock
• Số -> NSInteger
• Số -> CGFoat
• Số -> nổi

Đối với iOS, bạn cũng có thể viết các phương thức mô-đun gốc với bất kỳ loại đối số nào được lớp

const {CalendarModule} = ReactNative.NativeModules;

9 hỗ trợ (xem RCTConvert để biết chi tiết về những gì được hỗ trợ). Tất cả các chức năng của trình trợ giúp RCTConvert đều chấp nhận một giá trị JSON làm đầu vào và ánh xạ nó tới một loại hoặc lớp Objective-C gốc

Xuất hằng số

Một mô-đun gốc có thể xuất các hằng số bằng cách ghi đè phương thức gốc

RCT_EXPORT_BLOCKING_SYNCHRONOUS_METHOD(getName)
{
return [[UIDevice currentDevice] name];
}

2. Bên dưới

RCT_EXPORT_BLOCKING_SYNCHRONOUS_METHOD(getName)
{
return [[UIDevice currentDevice] name];
}

2 được ghi đè và trả về Từ điển chứa thuộc tính tên sự kiện mặc định mà bạn có thể truy cập bằng JavaScript như vậy

// RCTCalendarModule.m
#import "RCTCalendarModule.h"

@implementation RCTCalendarModule

// To export a module named RCTCalendarModule
RCT_EXPORT_MODULE();

@end

7

Sau đó, hằng số có thể được truy cập bằng cách gọi

RCT_EXPORT_BLOCKING_SYNCHRONOUS_METHOD(getName)
{
return [[UIDevice currentDevice] name];
}

4 trên mô-đun gốc trong JS như vậy

// RCTCalendarModule.m
#import "RCTCalendarModule.h"

@implementation RCTCalendarModule

// To export a module named RCTCalendarModule
RCT_EXPORT_MODULE();

@end

8

Về mặt kỹ thuật, có thể truy cập các hằng số được xuất trong

RCT_EXPORT_BLOCKING_SYNCHRONOUS_METHOD(getName)
{
return [[UIDevice currentDevice] name];
}

2 trực tiếp từ đối tượng

RCT_EXPORT_BLOCKING_SYNCHRONOUS_METHOD(getName)
{
return [[UIDevice currentDevice] name];
}

6. Điều này sẽ không còn được hỗ trợ với TurboModules, vì vậy chúng tôi khuyến khích cộng đồng chuyển sang phương pháp trên để tránh di chuyển cần thiết xuống dòng

Lưu ý rằng các hằng số chỉ được xuất vào thời điểm khởi tạo, vì vậy nếu bạn thay đổi giá trị

RCT_EXPORT_BLOCKING_SYNCHRONOUS_METHOD(getName)
{
return [[UIDevice currentDevice] name];
}

2 trong thời gian chạy thì điều đó sẽ không ảnh hưởng đến môi trường JavaScript

Đối với iOS, nếu bạn ghi đè

RCT_EXPORT_BLOCKING_SYNCHRONOUS_METHOD(getName)
{
return [[UIDevice currentDevice] name];
}

2 thì bạn cũng nên triển khai

RCT_EXPORT_BLOCKING_SYNCHRONOUS_METHOD(getName)
{
return [[UIDevice currentDevice] name];
}

9 để cho React Native biết liệu mô-đun của bạn có cần được khởi tạo trên luồng chính hay không, trước khi bất kỳ mã JavaScript nào thực thi. Nếu không, bạn sẽ thấy một cảnh báo rằng trong tương lai mô-đun của bạn có thể được khởi chạy trên một luồng nền trừ khi bạn chọn không tham gia một cách rõ ràng với

import React from 'react';
import {NativeModules, Button} from 'react-native';

const NewModuleButton = () => {
  const onPress = () => {
    console.log('We will invoke the native module here!');
  };

  return (
    <Button
      title="Click to invoke your native module!"
      color="#841584"
      onPress={onPress}
    />
  );
};

export default NewModuleButton;

0. Nếu mô-đun của bạn không yêu cầu quyền truy cập vào UIKit, thì bạn nên trả lời

RCT_EXPORT_BLOCKING_SYNCHRONOUS_METHOD(getName)
{
return [[UIDevice currentDevice] name];
}

9 bằng KHÔNG

gọi lại

Các mô-đun gốc cũng hỗ trợ một loại đối số duy nhất - gọi lại. Gọi lại được sử dụng để truyền dữ liệu từ Objective-C sang JavaScript cho các phương thức không đồng bộ. Chúng cũng có thể được sử dụng để thực thi JS không đồng bộ từ phía gốc

Đối với iOS, các cuộc gọi lại được triển khai bằng cách sử dụng loại

import React from 'react';
import {NativeModules, Button} from 'react-native';

const NewModuleButton = () => {
  const onPress = () => {
    console.log('We will invoke the native module here!');
  };

  return (
    <Button
      title="Click to invoke your native module!"
      color="#841584"
      onPress={onPress}
    />
  );
};

export default NewModuleButton;

2. Bên dưới tham số gọi lại

import React from 'react';
import {NativeModules, Button} from 'react-native';

const NewModuleButton = () => {
  const onPress = () => {
    console.log('We will invoke the native module here!');
  };

  return (
    <Button
      title="Click to invoke your native module!"
      color="#841584"
      onPress={onPress}
    />
  );
};

export default NewModuleButton;

3 được thêm vào

import React from 'react';
import {NativeModules, Button} from 'react-native';

const NewModuleButton = () => {
  const onPress = () => {
    console.log('We will invoke the native module here!');
  };

  return (
    <Button
      title="Click to invoke your native module!"
      color="#841584"
      onPress={onPress}
    />
  );
};

export default NewModuleButton;

4

// RCTCalendarModule.m
#import "RCTCalendarModule.h"

@implementation RCTCalendarModule

// To export a module named RCTCalendarModule
RCT_EXPORT_MODULE();

@end

9

Sau đó, bạn có thể gọi hàm gọi lại trong hàm gốc của mình, cung cấp bất kỳ kết quả nào bạn muốn chuyển đến JavaScript trong một mảng. Lưu ý rằng

import React from 'react';
import {NativeModules, Button} from 'react-native';

const NewModuleButton = () => {
  const onPress = () => {
    console.log('We will invoke the native module here!');
  };

  return (
    <Button
      title="Click to invoke your native module!"
      color="#841584"
      onPress={onPress}
    />
  );
};

export default NewModuleButton;

2 chỉ chấp nhận một đối số - một mảng tham số để chuyển đến lệnh gọi lại JavaScript. Dưới đây, bạn sẽ trả lại ID của sự kiện được tạo trong cuộc gọi trước đó

Điều quan trọng cần làm nổi bật là hàm gọi lại không được gọi ngay sau khi chức năng gốc hoàn thành—hãy nhớ rằng giao tiếp không đồng bộ

// To export a module named CalendarModuleFoo
RCT_EXPORT_MODULE(CalendarModuleFoo);

0

Phương pháp này sau đó có thể được truy cập trong JavaScript bằng cách sử dụng như sau

// To export a module named CalendarModuleFoo
RCT_EXPORT_MODULE(CalendarModuleFoo);

1

Một mô-đun gốc được cho là chỉ gọi lại cuộc gọi của nó một lần. Tuy nhiên, nó có thể lưu trữ cuộc gọi lại và gọi nó sau. Mẫu này thường được sử dụng để bọc các API iOS yêu cầu đại biểu— xem ví dụ về

import React from 'react';
import {NativeModules, Button} from 'react-native';

const NewModuleButton = () => {
  const onPress = () => {
    console.log('We will invoke the native module here!');
  };

  return (
    <Button
      title="Click to invoke your native module!"
      color="#841584"
      onPress={onPress}
    />
  );
};

export default NewModuleButton;

6. Nếu gọi lại không bao giờ được gọi, một số bộ nhớ bị rò rỉ

Có hai cách tiếp cận để xử lý lỗi với các cuộc gọi lại. Đầu tiên là tuân theo quy ước của Node và coi đối số đầu tiên được chuyển đến mảng gọi lại là một đối tượng lỗi

// To export a module named CalendarModuleFoo
RCT_EXPORT_MODULE(CalendarModuleFoo);

2

Trong JavaScript, sau đó bạn có thể kiểm tra đối số đầu tiên để xem có lỗi nào được thông qua hay không

// To export a module named CalendarModuleFoo
RCT_EXPORT_MODULE(CalendarModuleFoo);

3

Một tùy chọn khác là sử dụng hai cuộc gọi lại riêng biệt. onFailure và onSuccess

// To export a module named CalendarModuleFoo
RCT_EXPORT_MODULE(CalendarModuleFoo);

4

Sau đó, trong JavaScript, bạn có thể thêm một cuộc gọi lại riêng cho các phản hồi lỗi và thành công

// To export a module named CalendarModuleFoo
RCT_EXPORT_MODULE(CalendarModuleFoo);

5

Nếu bạn muốn chuyển các đối tượng giống như lỗi sang JavaScript, hãy sử dụng

import React from 'react';
import {NativeModules, Button} from 'react-native';

const NewModuleButton = () => {
  const onPress = () => {
    console.log('We will invoke the native module here!');
  };

  return (
    <Button
      title="Click to invoke your native module!"
      color="#841584"
      onPress={onPress}
    />
  );
};

export default NewModuleButton;

7 từ

import React from 'react';
import {NativeModules, Button} from 'react-native';

const NewModuleButton = () => {
  const onPress = () => {
    console.log('We will invoke the native module here!');
  };

  return (
    <Button
      title="Click to invoke your native module!"
      color="#841584"
      onPress={onPress}
    />
  );
};

export default NewModuleButton;

8 Hiện tại, điều này chỉ chuyển một từ điển có hình dạng Lỗi sang JavaScript, nhưng React Native nhằm mục đích tự động tạo các đối tượng Lỗi JavaScript thực trong tương lai. Bạn cũng có thể cung cấp một đối số

import React from 'react';
import {NativeModules, Button} from 'react-native';

const NewModuleButton = () => {
  const onPress = () => {
    console.log('We will invoke the native module here!');
  };

  return (
    <Button
      title="Click to invoke your native module!"
      color="#841584"
      onPress={onPress}
    />
  );
};

export default NewModuleButton;

9, được sử dụng cho các cuộc gọi lại lỗi và chấp nhận một đối số

// RCTCalendarModule.m
#import "RCTCalendarModule.h"

@implementation RCTCalendarModule

// To export a module named RCTCalendarModule
RCT_EXPORT_MODULE();

@end

00. Xin lưu ý rằng loại đối số này sẽ không được hỗ trợ với TurboModules

lời hứa

Các mô-đun gốc cũng có thể thực hiện một lời hứa, điều này có thể đơn giản hóa JavaScript của bạn, đặc biệt là khi sử dụng cú pháp

// RCTCalendarModule.m
#import "RCTCalendarModule.h"

@implementation RCTCalendarModule

// To export a module named RCTCalendarModule
RCT_EXPORT_MODULE();

@end

01 của ES2016. Khi tham số cuối cùng của một phương thức mô-đun gốc là

// RCTCalendarModule.m
#import "RCTCalendarModule.h"

@implementation RCTCalendarModule

// To export a module named RCTCalendarModule
RCT_EXPORT_MODULE();

@end

02 và

// RCTCalendarModule.m
#import "RCTCalendarModule.h"

@implementation RCTCalendarModule

// To export a module named RCTCalendarModule
RCT_EXPORT_MODULE();

@end

03, thì phương thức JS tương ứng của nó sẽ trả về một đối tượng JS Promise

Tái cấu trúc đoạn mã trên để sử dụng lời hứa thay vì gọi lại trông như thế này

// To export a module named CalendarModuleFoo
RCT_EXPORT_MODULE(CalendarModuleFoo);

6

Bản sao JavaScript của phương thức này trả về một Lời hứa. Điều này có nghĩa là bạn có thể sử dụng từ khóa

// RCTCalendarModule.m
#import "RCTCalendarModule.h"

@implementation RCTCalendarModule

// To export a module named RCTCalendarModule
RCT_EXPORT_MODULE();

@end

04 trong hàm async để gọi nó và đợi kết quả của nó

// To export a module named CalendarModuleFoo
RCT_EXPORT_MODULE(CalendarModuleFoo);

7

Gửi sự kiện tới JavaScript

Các mô-đun gốc có thể báo hiệu các sự kiện tới JavaScript mà không cần gọi trực tiếp. Ví dụ: bạn có thể muốn báo hiệu cho JavaScript lời nhắc rằng một sự kiện lịch từ ứng dụng lịch iOS gốc sẽ sớm diễn ra. Cách ưa thích để thực hiện việc này là phân lớp

// RCTCalendarModule.m
#import "RCTCalendarModule.h"

@implementation RCTCalendarModule

// To export a module named RCTCalendarModule
RCT_EXPORT_MODULE();

@end

05, thực hiện

// RCTCalendarModule.m
#import "RCTCalendarModule.h"

@implementation RCTCalendarModule

// To export a module named RCTCalendarModule
RCT_EXPORT_MODULE();

@end

06 và tự gọi là

// RCTCalendarModule.m
#import "RCTCalendarModule.h"

@implementation RCTCalendarModule

// To export a module named RCTCalendarModule
RCT_EXPORT_MODULE();

@end

07

Cập nhật lớp tiêu đề của bạn để nhập

// RCTCalendarModule.m
#import "RCTCalendarModule.h"

@implementation RCTCalendarModule

// To export a module named RCTCalendarModule
RCT_EXPORT_MODULE();

@end

05 và lớp con

// RCTCalendarModule.m
#import "RCTCalendarModule.h"

@implementation RCTCalendarModule

// To export a module named RCTCalendarModule
RCT_EXPORT_MODULE();

@end

05

// To export a module named CalendarModuleFoo
RCT_EXPORT_MODULE(CalendarModuleFoo);

8

Mã JavaScript có thể đăng ký các sự kiện này bằng cách tạo một phiên bản

// RCTCalendarModule.m
#import "RCTCalendarModule.h"

@implementation RCTCalendarModule

// To export a module named RCTCalendarModule
RCT_EXPORT_MODULE();

@end

10 mới xung quanh mô-đun của bạn

Bạn sẽ nhận được cảnh báo nếu bạn sử dụng tài nguyên một cách không cần thiết bằng cách phát ra một sự kiện trong khi không có người nghe. Để tránh điều này và để tối ưu hóa khối lượng công việc của mô-đun của bạn (e. g. bằng cách hủy đăng ký nhận thông báo ngược dòng hoặc tạm dừng tác vụ nền), bạn có thể ghi đè

// RCTCalendarModule.m
#import "RCTCalendarModule.h"

@implementation RCTCalendarModule

// To export a module named RCTCalendarModule
RCT_EXPORT_MODULE();

@end

11 và

// RCTCalendarModule.m
#import "RCTCalendarModule.h"

@implementation RCTCalendarModule

// To export a module named RCTCalendarModule
RCT_EXPORT_MODULE();

@end

12 trong lớp con

// RCTCalendarModule.m
#import "RCTCalendarModule.h"

@implementation RCTCalendarModule

// To export a module named RCTCalendarModule
RCT_EXPORT_MODULE();

@end

05 của mình

// To export a module named CalendarModuleFoo
RCT_EXPORT_MODULE(CalendarModuleFoo);

9

xâu chuỗi

Trừ khi mô-đun gốc cung cấp hàng đợi phương thức của riêng nó, nó không nên đưa ra bất kỳ giả định nào về luồng mà nó đang được gọi. Hiện tại, nếu một mô-đun gốc không cung cấp hàng đợi phương thức, React Native sẽ tạo một hàng đợi GCD riêng cho nó và gọi các phương thức của nó ở đó. Xin lưu ý rằng đây là chi tiết triển khai và có thể thay đổi. Nếu bạn muốn cung cấp rõ ràng hàng đợi phương thức cho mô-đun gốc, hãy ghi đè phương thức

// RCTCalendarModule.m
#import "RCTCalendarModule.h"

@implementation RCTCalendarModule

// To export a module named RCTCalendarModule
RCT_EXPORT_MODULE();

@end

14 trong mô-đun gốc. Ví dụ: nếu nó cần sử dụng API iOS chỉ dành cho luồng chính, thì nó phải chỉ định điều này thông qua

const {CalendarModuleFoo} = ReactNative.NativeModules;

0

Tương tự, nếu một hoạt động có thể mất nhiều thời gian để hoàn thành, mô-đun gốc có thể chỉ định hàng đợi của chính nó để chạy các hoạt động trên. Xin nhắc lại, hiện tại React Native sẽ cung cấp một hàng đợi phương thức riêng cho mô-đun gốc của bạn, nhưng đây là chi tiết triển khai mà bạn không nên dựa vào. Nếu bạn không cung cấp hàng đợi phương thức của riêng mình, thì trong tương lai, các hoạt động chạy dài của mô-đun gốc của bạn có thể sẽ chặn các lệnh gọi không đồng bộ đang được thực thi trên các mô-đun gốc không liên quan khác. Ví dụ, mô-đun

// RCTCalendarModule.m
#import "RCTCalendarModule.h"

@implementation RCTCalendarModule

// To export a module named RCTCalendarModule
RCT_EXPORT_MODULE();

@end

15 ở đây tạo hàng đợi của chính nó để hàng đợi React không bị chặn khi chờ truy cập đĩa có khả năng chậm

const {CalendarModuleFoo} = ReactNative.NativeModules;

1

// RCTCalendarModule.m
#import "RCTCalendarModule.h"

@implementation RCTCalendarModule

// To export a module named RCTCalendarModule
RCT_EXPORT_MODULE();

@end

16 được chỉ định sẽ được chia sẻ bởi tất cả các phương pháp trong mô-đun của bạn. Nếu chỉ một trong các phương thức của bạn đang chạy lâu (hoặc cần được chạy trên một hàng đợi khác với các phương thức khác vì lý do nào đó), bạn có thể sử dụng

// RCTCalendarModule.m
#import "RCTCalendarModule.h"

@implementation RCTCalendarModule

// To export a module named RCTCalendarModule
RCT_EXPORT_MODULE();

@end

17 bên trong phương thức để thực hiện mã của phương thức cụ thể đó trên một hàng đợi khác mà không ảnh hưởng đến các phương thức khác

const {CalendarModuleFoo} = ReactNative.NativeModules;

2

Chia sẻ hàng đợi công văn giữa các mô-đun

Phương thức

// RCTCalendarModule.m
#import "RCTCalendarModule.h"

@implementation RCTCalendarModule

// To export a module named RCTCalendarModule
RCT_EXPORT_MODULE();

@end

16 sẽ được gọi một lần khi mô-đun được khởi tạo và sau đó được React Native giữ lại, vì vậy bạn không cần phải tự mình giữ tham chiếu đến hàng đợi, trừ khi bạn muốn sử dụng nó trong mô-đun của mình. Tuy nhiên, nếu bạn muốn chia sẻ cùng một hàng đợi giữa nhiều mô-đun thì bạn cần đảm bảo rằng bạn giữ lại và trả về cùng một phiên bản hàng đợi cho mỗi mô-đun

Tiêm phụ thuộc

React Native sẽ tự động tạo và khởi tạo mọi mô-đun gốc đã đăng ký. Tuy nhiên, bạn có thể muốn tạo và khởi tạo các phiên bản mô-đun của riêng mình, chẳng hạn như, đưa vào các phụ thuộc

Bạn có thể làm điều này bằng cách tạo một lớp triển khai Giao thức

// RCTCalendarModule.m
#import "RCTCalendarModule.h"

@implementation RCTCalendarModule

// To export a module named RCTCalendarModule
RCT_EXPORT_MODULE();

@end

19, khởi tạo một

// RCTCalendarModule.m
#import "RCTCalendarModule.h"

@implementation RCTCalendarModule

// To export a module named RCTCalendarModule
RCT_EXPORT_MODULE();

@end

20 với đại biểu làm đối số và khởi tạo một

// RCTCalendarModule.m
#import "RCTCalendarModule.h"

@implementation RCTCalendarModule

// To export a module named RCTCalendarModule
RCT_EXPORT_MODULE();

@end

21 với cầu khởi tạo

const {CalendarModuleFoo} = ReactNative.NativeModules;

3

Xuất Swift

Swift không hỗ trợ macro, do đó, việc hiển thị các mô-đun gốc và phương thức của chúng cho JavaScript bên trong React Native yêu cầu thiết lập nhiều hơn một chút. Tuy nhiên, nó hoạt động tương đối giống nhau. Giả sử bạn có cùng một

const {CalendarModuleFoo} = ReactNative.NativeModules;

7 nhưng là một lớp Swift

const {CalendarModuleFoo} = ReactNative.NativeModules;

4

Điều quan trọng là sử dụng công cụ sửa đổi

// RCTCalendarModule.m
#import "RCTCalendarModule.h"

@implementation RCTCalendarModule

// To export a module named RCTCalendarModule
RCT_EXPORT_MODULE();

@end

23 để đảm bảo lớp và chức năng được xuất đúng sang thời gian chạy Objective-C

Sau đó, tạo một tệp triển khai riêng sẽ đăng ký thông tin cần thiết với React Native

const {CalendarModuleFoo} = ReactNative.NativeModules;

5

Đối với những người mới làm quen với Swift và Objective-C, bất cứ khi nào bạn kết hợp hai ngôn ngữ này trong một dự án iOS, bạn cũng sẽ cần một tệp bắc cầu bổ sung, được gọi là tiêu đề bắc cầu, để hiển thị các tệp Objective-C cho Swift. Xcode sẽ đề nghị tạo tệp tiêu đề này cho bạn nếu bạn thêm tệp Swift vào ứng dụng của mình thông qua tùy chọn menu Xcode

// RCTCalendarModule.m
#import "RCTCalendarModule.h"

@implementation RCTCalendarModule

// To export a module named RCTCalendarModule
RCT_EXPORT_MODULE();

@end

24. Bạn sẽ cần nhập

// RCTCalendarModule.m
#import "RCTCalendarModule.h"

@implementation RCTCalendarModule

// To export a module named RCTCalendarModule
RCT_EXPORT_MODULE();

@end

25 trong tệp tiêu đề này

const {CalendarModuleFoo} = ReactNative.NativeModules;

6

Bạn cũng có thể sử dụng

// RCTCalendarModule.m
#import "RCTCalendarModule.h"

@implementation RCTCalendarModule

// To export a module named RCTCalendarModule
RCT_EXPORT_MODULE();

@end

26 và

// RCTCalendarModule.m
#import "RCTCalendarModule.h"

@implementation RCTCalendarModule

// To export a module named RCTCalendarModule
RCT_EXPORT_MODULE();

@end

27 để thay đổi tên JavaScript của mô-đun hoặc phương thức bạn đang xuất. Để biết thêm thông tin, xem

// Without passing in a name this will export the native module name as the Objective-C class name with “RCT” removed
RCT_EXPORT_MODULE();

1

Quan trọng khi tạo mô-đun bên thứ ba. Thư viện tĩnh với Swift chỉ được hỗ trợ trong Xcode 9 trở lên. Để xây dựng dự án Xcode khi bạn sử dụng Swift trong thư viện tĩnh iOS mà bạn đưa vào mô-đun, dự án ứng dụng chính của bạn phải chứa mã Swift và chính tiêu đề cầu nối. Nếu dự án ứng dụng của bạn không chứa bất kỳ mã Swift nào, giải pháp thay thế có thể là một mã trống. tệp nhanh chóng và một tiêu đề bắc cầu trống

Tên phương thức dành riêng

làm mất hiệu lực()

Các mô-đun gốc có thể tuân thủ giao thức RCTInvalidating trên iOS bằng cách triển khai phương thức

// RCTCalendarModule.m
#import "RCTCalendarModule.h"

@implementation RCTCalendarModule

// To export a module named RCTCalendarModule
RCT_EXPORT_MODULE();

@end

29. Phương pháp này khi cầu gốc bị vô hiệu (tức là. khi tải lại devmode). Vui lòng sử dụng cơ chế này khi cần thiết để thực hiện dọn dẹp cần thiết cho mô-đun gốc của bạn