npm-module-test-thangtmc73

This module is only used to help me know how to make a RN module and publish it on npm

Sử dụng

RedText

Example

// require from the module
import {RedText} from 'react-native-npm-module-test-thangtmc73'

...
// JSX
<RedText>Text</Text>

Phần text truyền vào RedText sẽ tô màu đỏ.

showToast()

Example

// require from the module
import RNNpmModuleTestThangtmc73 from 'react-native-npm-module-test-thangtmc73'

...
// JS

RNNpmModuleTestThangtmc73.showToast('Message', 5);

Cài đặt

Android

• Trong file android/setting.gradle trong thư mục project ứng dụng RN, thêm vào các dòng sau để include project thư viện:

include ':npm-module-test-thangtmc73'
project(':npm-module-test-thangtmc73').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-npm-module-test-thangtmc73/android')

• Trong file android/app/build.gradle trong thư mục project ứng dụng RN, thêm vào dòng sau vào phần dependencies:

dependencies {
    ...
    compile project(':npm-module-test-thangtmc73')
}

• Trong file MainApplication.java, thêm RNNpmModuleTestThangtmc73Package vào phương thức getPackages():

@Override
protected List<ReactPackage> getPackages() {
    return Arrays.<ReactPackage>asList(
        new MainReactPackage(),
        new RNNpmModuleTestThangtmc73Package()
    );
}

Cấu trúc

Android

• Bên trong file build.gradle sẽ có dòng:

apply plugin: 'com.android.library'

Dòng này đánh dấu đây là project thư viện Android, khi có project khác dùng project này chúng sẽ compile project coi nó như một thư viện, nó khác biệt với project ứng dụng Android thông thường như sau:

apply plugin: 'com.android.application'

• Bên trong file RNNpmModuleTestThangtmc73Module.java, class RNNpmModuleTestThangtmc73Module kế thừa lớp ReactContextBaseJavaModule sẽ hiện thực các phương thức hỗ trợ bên Javascript. Phương thức getName() nhằm trả về một chuỗi tên class mà NativeModule sẽ đại diện bên Javascript. Các phương thức Java hiện thực các yêu cầu để Javascript có thể tương tác được cần được đánh dấu với @ReactMethod

@ReactMethod
public void showToast(String message, int duration) {
    Toast.makeText(getReactApplicationContext(), message, duration).show();
}

• Bên trong file RNNpmModuleTestThangtmc73Package.java, ta cần đánh dấu để module chúng ta tạo ra có thể sử dụng từ Javascript có thể gọi đến các thành phần Android.

@Override
public List<NativeModule> createNativeModules(ReactApplicationContext reactContext) {
    return Arrays.<NativeModule>asList(new RNNpmModuleTestThangtmc73Module(reactContext));
}

iOS

Publish

Yêu cầu Package.json

• Trường name phải là tên độc nhất, không trùng với các tên thư viện đã có.
• Phải có trường version để xác định phiên bản.

Đăng hoặc cập nhật thư viện

• cd vào thư mục chứa project thư viện

npm publish

Tham khảo

https://medium.com/gbox-crew-blog/making-libraries-for-react-native-14a8f5006697

https://facebook.github.io/react-native/docs/native-modules-android.html