Tự tạo Package RN từ native module
TIL
764
White

Anh Doan viết ngày 20/03/2019

Tự tạo Package RN từ native module

React Native là một Framework tuyệt vời giúp ta xây dựng đa nền tảng cho ứng dụng di động. Để sử dụng được các module từ native (objective-C và java) ta cần cài một số package react-native được open source.

Tuy nhiên đôi khi bạn có nhu cầu sử dụng một số module của native nhưng trớ treo thay chưa có package react-native support.
Sau đây tôi sẻ thử viết một package để chuyển module: https://github.com/nicklockwood/iCarousel cho react-native có thể sử dụng được.

Tạo inteface RNCarousel.h và RNCarousel.m để thực thi việc quản lý render, re-render và config các giá trị cho iCarousel:
alt text

Trong RNCarousel.m ta quản lý render và re-render component qua function:
- (void)didUpdateReactSubviews
{
self.items = [[NSMutableArray alloc] init];
for (UIView *subview in self.reactSubviews) {
[self.items addObject:subview];
}
[self setCurrentItemIndex:0];
[self reloadData];
}

Tạo inteface RNCarouselManager.h và RNCarouselManager .m để thực thi việc kết nối giữa môi trường javascript và môi trường native:

`

#import "RNCarouselManager.h"
#import "RNCarousel.h"
#if __has_include(<React/RCTUIManager.h>)
#import <React/RCTUIManager.h>
#else
#import "RCTUIManager.h"
#endif

@implementation RNCarouselManager
RCT_EXPORT_MODULE()

@synthesize bridge = _bridge;
- (dispatch_queue_t)methodQueue {
  return dispatch_get_main_queue();
}

- (UIView *)view
{
  RNCarousel * carousel;
  carousel = [[RNCarousel alloc]  init];
  return carousel;
}

RCT_EXPORT_VIEW_PROPERTY(type, NSInteger)

RCT_EXPORT_VIEW_PROPERTY(vertical, BOOL)
RCT_EXPORT_VIEW_PROPERTY(bounces, BOOL)
RCT_EXPORT_VIEW_PROPERTY(scrollEnabled, BOOL)

RCT_EXPORT_VIEW_PROPERTY(wrap, BOOL)
RCT_EXPORT_VIEW_PROPERTY(perspective, CGFloat)
RCT_EXPORT_VIEW_PROPERTY(decelerationRate, CGFloat)
RCT_EXPORT_VIEW_PROPERTY(scrollSpeed, CGFloat)
RCT_EXPORT_VIEW_PROPERTY(bounceDistance, CGFloat)
RCT_EXPORT_VIEW_PROPERTY(autoscroll, CGFloat)
RCT_EXPORT_VIEW_PROPERTY(onPressItem, RCTBubblingEventBlock)
- (NSDictionary *)constantsToExport
{
return @{
       @"Type": @{
           @"iCarouselTypeLinear": @(iCarouselTypeLinear),
           @"iCarouselTypeRotary": @(iCarouselTypeRotary),
           @"iCarouselTypeInvertedRotary": @(iCarouselTypeInvertedRotary),
           @"iCarouselTypeCylinder": @(iCarouselTypeCylinder),
           @"iCarouselTypeInvertedCylinder": @(iCarouselTypeInvertedCylinder),
           @"iCarouselTypeWheel": @(iCarouselTypeWheel),
           @"iCarouselTypeInvertedWheel": @(iCarouselTypeInvertedWheel),
           @"iCarouselTypeCoverFlow": @(iCarouselTypeCoverFlow),
           @"iCarouselTypeCoverFlow2": @(iCarouselTypeCoverFlow2),
           @"iCarouselTypeTimeMachine": @(iCarouselTypeTimeMachine),
           @"iCarouselTypeInvertedTimeMachine": @(iCarouselTypeInvertedTimeMachine),
           @"iCarouselTypeCustom": @(iCarouselTypeCustom)
           }
       };
}
@end`
  • RCT_EXPORT_VIEW_PROPERTY: export các property cho môi trường javascript có thể truyền về cho môi trường native.
  • RCT_EXPORT_METHOD: export method cho môi trường javascript tương tác với môi trường native.
  • (NSDictionary *)constantsToExport: khai báo các hằng và định danh cho môi trường javascript sử dụng.

Tiếp theo ta cần tạo file file index.js để gọi và sữ dụng iCarousel trong môi trường javascript của react-native:
`

import React from 'react';
import { NativeModules, requireNativeComponent } from 'react-native';
import PropTypes from 'prop-types';
import createClass from 'create-react-class';
const { RNCarouselManager } = NativeModules;
const Carousel = createClass({
propTypes: {
  wrap: PropTypes.bool,
  items: PropTypes.array,
  vertical: PropTypes.bool,
  bounces: PropTypes.bool,
  scrollEnabled: PropTypes.bool,
  type: PropTypes.number,
  perspective: PropTypes.number,
  decelerationRate: PropTypes.number,
  scrollSpeed: PropTypes.number,
  bounceDistance: PropTypes.number,
  onPressItem: PropTypes.func,
  autoscroll: PropTypes.number
},
render: function() {
  return <RNCarousel {...this.props} />;
}
});
const RNCarousel = requireNativeComponent('RNCarousel', Carousel);
Carousel.Type = RNCarouselManager.Type;
export default Carousel;`

Cuối cùng ta dùng lệnh: npm publish để publish thành một package để sau này sử dụng lại.

Xem thêm tại: https://github.com/doananh234/react-native-carousel-wrapper

AnhDoan 20-03-2019

Bình luận


White
{{ comment.user.name }}
Bỏ hay Hay
{{comment.like_count}}
Male avatar
{{ comment_error }}
Hủy
   

Hiển thị thử

Chỉnh sửa

White

Anh Doan

2 bài viết.
1 người follow
Kipalog
{{userFollowed ? 'Following' : 'Follow'}}
Cùng một tác giả
White
1 0
Your TIL title (Ảnh) Trong loạt bài viết này mình sẽ tổng hợp và giải thích những thuật ngữ thường gặp trong ngành thiết kế UX/UI. Mình sẽ cố giả...
Anh Doan viết hơn 1 năm trước
1 0
Bài viết liên quan
White
0 4
fCC: Technical Documentation Page note So I have finished the HTML part of this exercise and I want to come here to lament about the lengthy HTML ...
HungHayHo viết hơn 2 năm trước
0 4
White
4 0
I used Spring boot, Hibernate few times back then at University, I'v started using it again recently. In this (Link), I want to check how Spring J...
Rey viết gần 2 năm trước
4 0
White
24 1
Toán tử XOR có tính chất: + A XOR A = 0 + 0 XOR A = A Với tính chất này, có thể cài đặt bài toán sau với độ phức tạp O(N) về runtime, và với O(1)...
kiennt viết 4 năm trước
24 1
{{like_count}}

kipalog

{{ comment_count }}

bình luận

{{liked ? "Đã kipalog" : "Kipalog"}}


White
{{userFollowed ? 'Following' : 'Follow'}}
2 bài viết.
1 người follow

 Đầu mục bài viết

Vẫn còn nữa! x

Kipalog vẫn còn rất nhiều bài viết hay và chủ đề thú vị chờ bạn khám phá!