1.0.2 • Published 6 years ago
react-native-npm-module-test-thangtmc73 v1.0.2
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ầndependencies
:
dependencies {
...
compile project(':npm-module-test-thangtmc73')
}
- Trong file
MainApplication.java
, thêmRNNpmModuleTestThangtmc73Package
vào phương thứcgetPackages()
:
@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
, classRNNpmModuleTestThangtmc73Module
kế thừa lớpReactContextBaseJavaModule
sẽ hiện thực các phương thức hỗ trợ bên Javascript. Phương thứcgetName()
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