Mô-đun UI gốc trong React Native (P1)

Thứ Ba, 19/11/2019

Tram Ho

React Native đã cung cấp các thành phần cơ bản, sử dụng để xây dựng ứng dụng của mình: view, label, button v.v. Tuy nhiên, có những lúc những thành phần này không đủ.
Hướng dẫn này sẽ giới thiệu cách build custom UI có thể tương tác qua lại giữa react-native(Javascript) và native(iOS/Android).

Phần demo có sử dụng thư viện native, Objective-C, Swift 5, Xcode 11, react-native 0.61
Install require:
React Native CLI npm install -g react-native-cli
Xcode 11

Tạo ứng dụng React-native

react-native init DemoProject

Nếu sử dụng yarn/expo thì sau khi create hãy sử dụng eject để có 2 thư mục ios, và android tương ứng

react-native run-ios --simulator="iPhone Xs"
Chạy thử để đảm bảo project đã được khởi tạo thành công!

Tạo Native UI Component(iOS)

Mở thư mục ios

run pod install
Sau đó mở project DemoProject.xcworkspace

Bước 1: Tạo file Main storyboard.
File → New → Storyboard

Bước 2: Tạo file MyCustomViewController.swift
File -> New -> File… -> Swift file

Lưu ý: Khi có thông báo tạo Bridging Header: chọn Create Bridging Header.

Bước 3: Tạo file ChangeViewBridge.m/h
File -> New -> File… -> Cocoa Touch Class

Vì React-Native được xây dựng để build với ObjectiveC nên chúng ta cần thực hiện vài thao tác để nó có thể chạy được với Swift.

File này sẽ sử dụng đến sau

Bước 4: Mở file DemoProject-Bridging-Header
Import các thư viện từ React(liên quan đến UIView)

#import "React/RCTBridge.h"
#import "React/RCTBridgeModule.h"
#import "React/RCTBundleURLProvider.h"
#import "React/RCTRootView.h"
#import &lt;React/RCTUIManager.h&gt;
#import &lt;React/RCTComponent.h&gt;
#import &lt;React/RCTViewManager.h&gt;

#import "React/RCTBridge.h"

#import "React/RCTBridgeModule.h"

#import "React/RCTBundleURLProvider.h"

#import "React/RCTRootView.h"

#import <React/RCTUIManager.h>

#import <React/RCTComponent.h>

#import <React/RCTViewManager.h>

Bước 5: Dựng UI và code bên native
Tạo một ViewController trong Main.storyboard đã tạo bên trên

Phần code trong file MyCustomViewController

class MyCustomViewController: UIViewController {

  @IBOutlet weak var randomView: UIView!
  
    override func viewDidLoad() {
        super.viewDidLoad()

        // Do any additional setup after loading the view.
    }
    
  @IBAction func randomBgButtonDidTouch(_ sender: UIButton) {
    self.randomView.backgroundColor = .random
  }
  
  @IBAction func dismisButtonDidTouch(_ sender: UIButton) {
    
  }
  
}

extension UIColor {
    static var random: UIColor {
        return UIColor(red: .random(in: 0...1),
                       green: .random(in: 0...1),
                       blue: .random(in: 0...1),
                       alpha: 1.0)
    }
}

class MyCustomViewController: UIViewController {

@IBOutlet weak var randomView: UIView!

override func viewDidLoad() {

super.viewDidLoad()

// Do any additional setup after loading the view.

}

@IBAction func randomBgButtonDidTouch(_ sender: UIButton) {

self.randomView.backgroundColor = .random

}

@IBAction func dismisButtonDidTouch(_ sender: UIButton) {

}

extension UIColor {

static var random: UIColor {

return UIColor(red: .random(in: 0...1),

green: .random(in: 0...1),

blue: .random(in: 0...1),

alpha: 1.0)

}

Với mục đích demo: Chức năng của phần native sẽ là thay đổi ngẫu nhiên background color của view. Nếu cần sử dụng các framework thì cũng làm tương tự sau khi import được framework vào project

Chuyển view từ react-native sang native(iOS)

Khai func để có thể navigation view đến native

AppDelegate.h
#import &lt;React/RCTBridgeDelegate.h&gt;
#import &lt;UIKit/UIKit.h&gt;
#import &lt;UMReactNativeAdapter/UMModuleRegistryAdapter.h&gt;
#import &lt;UMCore/UMAppDelegateWrapper.h&gt;

@interface AppDelegate : UMAppDelegateWrapper &lt;RCTBridgeDelegate, UIApplicationDelegate&gt; {
    NSDictionary *options;
    UIViewController *viewController;
}

@property (nonatomic, strong) UMModuleRegistryAdapter *moduleRegistryAdapter;
@property (nonatomic, strong) UIWindow *window;

- (void) setInitialViewController;
- (void) goToNativeView;
@end

AppDelegate.h

#import <React/RCTBridgeDelegate.h>

#import <UIKit/UIKit.h>

#import <UMReactNativeAdapter/UMModuleRegistryAdapter.h>

#import <UMCore/UMAppDelegateWrapper.h>

@interface AppDelegate : UMAppDelegateWrapper <RCTBridgeDelegate, UIApplicationDelegate> {

NSDictionary *options;

UIViewController *viewController;

}

@property (nonatomic, strong) UMModuleRegistryAdapter *moduleRegistryAdapter;

@property (nonatomic, strong) UIWindow *window;

- (void) setInitialViewController;

- (void) goToNativeView;

@end

Định nghĩa func ở file AppDelegate.m

- (void) setInitialViewController {
  RCTBridge *bridge = [[RCTBridge alloc] initWithDelegate:self launchOptions:options];
  RCTRootView *rootView = [[RCTRootView alloc] initWithBridge:bridge moduleName:@"DemoProject" initialProperties:nil];
  self.window = [[UIWindow alloc] initWithFrame:[UIScreen mainScreen].bounds];
  UIViewController *rootViewController = [UIViewController new];
  rootViewController.view = rootView;
  self.window.rootViewController = rootViewController;

  viewController = rootViewController;

  [self.window makeKeyAndVisible];
}

// this method will be called from the RCTBridge
- (void) goToNativeView {
  UIViewController *vc = [UIStoryboard storyboardWithName:@"Main" bundle:nil].instantiateInitialViewController;
  [self.window.rootViewController presentViewController:vc animated:true completion:nil];
}

- (void) setInitialViewController {

RCTBridge *bridge = [[RCTBridge alloc] initWithDelegate:self launchOptions:options];

RCTRootView *rootView = [[RCTRootView alloc] initWithBridge:bridge moduleName:@"DemoProject" initialProperties:nil];

self.window = [[UIWindow alloc] initWithFrame:[UIScreen mainScreen].bounds];

UIViewController *rootViewController = [UIViewController new];

rootViewController.view = rootView;

self.window.rootViewController = rootViewController;

viewController = rootViewController;

[self.window makeKeyAndVisible];

}

// this method will be called from the RCTBridge

- (void) goToNativeView {

UIViewController *vc = [UIStoryboard storyboardWithName:@"Main" bundle:nil].instantiateInitialViewController;

[self.window.rootViewController presentViewController:vc animated:true completion:nil];

}

Xử lý giao tiếp giữa react-native và native

Lúc này bắt đầu xử lý file Objective-C tạo từ trước

ChangeViewBridge.h
#import "React/RCTBridgeModule.h"

@interface ChangeViewBridge : NSObject &lt;RCTBridgeModule&gt;

- (void) changeToNativeView;
@end

ChangeViewBridge.h

#import "React/RCTBridgeModule.h"

@interface ChangeViewBridge : NSObject <RCTBridgeModule>

- (void) changeToNativeView;

@end

func changeToNativeView này sẽ được gọi ở từ Javascript ở react-native

ChangeViewBridge.m
#import &lt;Foundation/Foundation.h&gt;
#import "AppDelegate.h"
#import "React/RCTBridgeModule.h"
#import "ChangeViewBridge.h"

@implementation ChangeViewBridge

RCT_EXPORT_MODULE(ChangeViewBridge);

RCT_EXPORT_METHOD(changeToNativeView) {
  NSLog(@"RN binding - Native View - Loading ViewController.swift");
  dispatch_async(dispatch_get_main_queue(), ^{
      AppDelegate *appDelegate = (AppDelegate *)[UIApplication sharedApplication].delegate;
      [appDelegate goToNativeView];
  });
}
@end

ChangeViewBridge.m

#import <Foundation/Foundation.h>

#import "AppDelegate.h"

#import "React/RCTBridgeModule.h"

#import "ChangeViewBridge.h"

@implementation ChangeViewBridge

RCT_EXPORT_MODULE(ChangeViewBridge);

RCT_EXPORT_METHOD(changeToNativeView) {

NSLog(@"RN binding - Native View - Loading ViewController.swift");

dispatch_async(dispatch_get_main_queue(), ^{

AppDelegate *appDelegate = (AppDelegate *)[UIApplication sharedApplication].delegate;

[appDelegate goToNativeView];

});

}

@end

Xử lý func gọi từ file js

Sử dụng NativeModules từ react-native, gọi class ChangeViewBridge và func changeToNativeView() để push view từ react-native sang native

Tham khảo đoạn code App.js

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Alert,
  Text,
  View,
  NativeModules,
  TouchableHighlight
} from 'react-native';

export default class App extends React.Component {

  constructor(props) {
     super(props)
     this.done = false;
   }

    _changeView() {
      this.done = true;
      this.render();
      NativeModules.ChangeViewBridge.changeToNativeView();
    }

  render() {
    if (!this.done) {
      return (
        &lt;View style={styles.container}&gt;
          &lt;TouchableHighlight onPress={() =&gt; this._changeView()}&gt;
            &lt;Text color="#336699"&gt;
              Go to camera view
            &lt;/Text&gt;
          &lt;/TouchableHighlight&gt;
        &lt;/View&gt;
      );
    } else {
      return (&lt;View&gt;&lt;/View&gt;);
    }
  }
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  }
});

import React, { Component } from 'react';

import {

AppRegistry,

StyleSheet,

Alert,

Text,

View,

NativeModules,

TouchableHighlight

} from 'react-native';

export default class App extends React.Component {

constructor(props) {

super(props)

this.done = false;

}

_changeView() {

this.done = true;

this.render();

NativeModules.ChangeViewBridge.changeToNativeView();

}

render() {

if (!this.done) {

return (

<TouchableHighlight onPress={() => this._changeView()}>

Go to camera view

</Text>

</TouchableHighlight>

</View>

);

} else {

return (<View></View>);

}

};

const styles = StyleSheet.create({

container: {

flex: 1,

justifyContent: 'center',

alignItems: 'center',

backgroundColor: '#F5FCFF',

}

});

Buid app và cùng xem kết quả

Phần 1 cũng xin tạm khép lại tại đây. Phần 2 mình sẽ hướng dẫn thêm các thuộc tính, callback bên native có thể giao tiếp được với react-natvie
Mọi thắc mắc bạn có thể để lại bình luận, hoặc contact trực tiếp với mình!

See you…

Chia sẻ bài viết ngay

Nguồn bài viết : Viblo

Mô-đun UI gốc trong React Native (P1)

Tạo ứng dụng React-native

Tạo Native UI Component(iOS)

Chuyển view từ react-native sang native(iOS)

Xử lý giao tiếp giữa react-native và native

Xử lý func gọi từ file js

TikTok trở thành nền tảng mảng xã hội lớn thứ hai ở Nam Phi

Mất giá nhanh nhất sau 9 tháng ra mắt, iPhone 14 Pro Max tiếp tục phá đáy tại Việt Nam

Hướng dẫn sử dụng ngôn ngữ R cho người mới bắt đầu

10 plugin cần thiết của SublimeText dành cho các lập trình viên JavaScript