[React Native] Tích hợp React Native vào ứng dụng native - iOS (Swift) - Phần 1

React Native là sự lựa chọn tốt khi bạn bắt đầu một ứng dụng mobile mới sử dụng việc kết hợp. Dù sao thì nó cũng sẽ hoạt động tốt khi thêm một màn hình hoặc thêm một luồng xử lý mới vào các ứng dụng native. Với một vài bước dưới đây, bạn có thể thêm được các tính năng cơ bản trên nền tảng React Native, các màn hình, các view và nhiều hơn thế nữa.

Các bước làm cụ thể sẽ khác nhau tùy thuộc vào nền tảng nào là nền tảng mà bạn muốn hướng đến. Trong bài viết này tôi sẽ mô tả cách tích hợp vào ứng dụng Native của iOS khi sử dụng ngôn ngữ Swift.

Những tư tưởng cốt lõi

Chìa khóa để tích hợp các thành phần trong React Native vào tỏng một ứng dụng iOS là:

1. Cài đặt React Native dependencies và cấu trúc thư mục.
2. Hiểu được đâu là những thành phần trong React Native mà bạn sẽ sử dụng trong ứng dụng.
3. Thêm các thành phần như là các dependencies sử dụng CocoaPods.
4. Phát triển các thành phần React Native với JavaScript.
5. Thêm một RCTRootView vào ứng dùng iOS, View này sẽ phục vụ cho việc lưu trữ các thành phần của React Native.
6. Start React Native server và chạy ứng dụng native của bạn.
7. Xác nhận React Native trong ứng dụng của bạn đã hoạt động như kỳ vọng.

Điều kiện cần

Theo như hướng dẫn để xây dựng một ứng dụng với native code trong tài liệu Getting Started guide để cấu hình môi trường phát triển của bạn dành cho việc xây dựng ứng dụng React Native dành cho iOS.

1. Cài đặt cấu trúc thư mục.

Theo như kinh nghiệm, hãy tạo một thư mục mới dành cho tích hợp project React Native, sau đó copy ứng dụng iOS đã có vào trong thư mục con là /iOS.

2. Cài đặt JavaScript dependencies

Đến thư mục gốc của project và tạo một file mới có tên package.json với nội dung như sau:

{
  "name": "MyReactNativeApp",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "start": "node node_modules/react-native/local-cli/cli.js start"
  }
}

Tiếp theo, bạn hãy đảm bảo rằng bạn đã cài đặt yarn package manager.

Cài đặt hai package react và react-native, mở terminal hoặc command prompt, sau đó chuyển đến thư mục chưa package.json sau đó chạy lệnh

$ yarn add react-native

câu lệnh này sẽ xuất hiện cảnh báo giống như

warning "react-native@0.52.2" has unmet peer dependency "react@16.2.0".

Không sao cả, điều đó có nghĩa là chugns ta nên cài dặt react:

$ yarn add react@16.2.0    # Make sure you use the same react version as printed by yarn when installing react-native!

Nó sẽ tạo ra một thư mục mới là /node_modules. Thư mục này lưu trữ tất cả các JavaScript dependencies yêu cầu để build project.

Thêm node_modules/ tới file .gitignore

3. Cài đặt CocoaPods

CocoaPods là một công cụ quản lý package dành cho phát triển iOS và macOS. Chúng ta dùng nó để thêm React Native framework hiện tại vào trong project của bạn.

Chúng tôi khuyên bạn nên cài đặt CocoaPods bằng cách sử dụng Homebrew.

$ brew install cocoapods

Về mặt kỹ thuật, không thể sử dụng CocoaPods, tuy nhiên điều này đòi hỏi phải có các thư viện thủ công và trình bổ sung liên kết có thể làm quá phức tạp quá trình này.

Thêm React Native tới ứng dụng của bạn.

Giả thiết như ứng dụng để tích hợp là game 2048. Đây là menu chính của ứng dụng native dường như không có React Native.

Cấu hình CocoaPods dependencies

Trước khi bạn tích hợp React Native vào trong ứng dụng của ban, bạn sẽ muốn định nghĩa thành phần nào của React Native mà bạn muốn tích hợp. Chúng ta sẽ sử dụng CocoaPods để chỉ rõ đâu là subspecs mà ứng dụng của bạn sẽ phụ thuộc.

Danh sách các subspecs được hỗ trợ đã sẵn sàng trong /node_modules/react-native/React.podspec. Chúng đã được tạo ra và đặt tên theo chức năng. Ví dụ như, bạn sẽ luôn muốn tạo ra Core subspecs. Nó sẽ có AppRegistry, StyleSheet, View và các thư viện React Native core khác. Nếu như bạn muốn thêm thư viện Text của React Native (ví dụ như để dùng thành phần <Text>), tiếp theo bạn sẽ cần RCTText subspecs. Nếu bạn muốn thư viện Image (cho thành phần <Image>), thì bạn sẽ phải cần RCTImage subspecs.

Bạn có thể chỉ rõ subspecs mà bạn sẽ cần trong một Podfile file. Cách dễ nhất là tạo ra một Podfile là chạy CocoaPods init trong thư mục con iOS/ của project:

$ pod init

Podfile sẽ bao gồm một bản mẫu cài đặt, nó sẽ nhóm các mục tiêu tích hợp. Cuối cùng, một file Podfile sẽ trông tương tự như dưới đây:

source 'https://github.com/CocoaPods/Specs.git'

# Required for Swift apps
platform :ios, '8.0'
use_frameworks!

# The target name is most likely the name of your project.
target 'swift-2048' do

  # Your 'node_modules' directory is probably in the root of your project,
  # but if not, adjust the `:path` accordingly
  pod 'React', :path => '../node_modules/react-native', :subspecs => [
    'Core',
    'CxxBridge', # Include this for RN >= 0.47
    'DevSupport', # Include this to enable In-App Devmenu if RN >= 0.43
    'RCTText',
    'RCTNetwork',
    'RCTWebSocket', # needed for debugging
    # Add any other subspecs you want to use in your project
  ]
  # Explicitly include Yoga if you are using RN >= 0.42.0
  pod "yoga", :path => "../node_modules/react-native/ReactCommon/yoga"

  # Third party deps podspec link
  pod 'DoubleConversion', :podspec => '../node_modules/react-native/third-party-podspecs/DoubleConversion.podspec'
  pod 'GLog', :podspec => '../node_modules/react-native/third-party-podspecs/GLog.podspec'
  pod 'Folly', :podspec => '../node_modules/react-native/third-party-podspecs/Folly.podspec'

end

Sau khi bạn đã tạo ra Podfile, như vậy là bạn đã sẵn sàng để cài đặt React Native pod.

$ pod install

Bạn nên nhìn thấy các output tương tự dưới đây

Analyzing dependencies
Fetching podspec for `React` from `../node_modules/react-native`
Downloading dependencies
Installing React (0.26.0)
Generating Pods project
Integrating client project
Sending stats
Pod installation complete! There are 3 dependencies from the Podfile and 1 total pod installed.

Nếu như bạn nhận được cảnh báo như sau "The swift-2048 [Debug] target overrides the FRAMEWORK_SEARCH_PATHS build setting defined in Pods/Target Support Files/Pods-swift-2048/Pods-swift-2048.debug.xcconfig. This can lead to problems with the CocoaPods installation" thì hãy chắc chắn Framework Search Paths trong Build Settings của cả Debug và Release chỉ chứa $(inherited).

Tích hợp code

Bây giờ chúng ta sẽ chính thứ thay đổi ứng dụng native iOS để tích hợp React Native. Lấy ví dụ ứng dụng 2048, chúng ta sẽ thêm màn hình "High Score" trong React Native.

Thành phần React Native

Phần code nhỏ đầu tiên chúng ta sẽ viết bằng code React Native cho màn hình "High Score" và sau đó sẽ tích hợp vào trong ứng dụng của chúng ta.

Đầu tiên, tạo một empty file index.js ở root của React Native project. index.js là điểu bắt đầu của ứng dụng React Native, và nó là một yêu cầu bắt buộc. Nó có thể là một file nhỏ và requires đến các phần khác của các thành phần trong React Native hoặc ứng dụng, hoặc nó có thể bao gồm tất cả các code mà bạn cần cho nó. Trong trường hợp của chúng ta, chúng ta sẽ đưa tất cả mọi thứ vào trong index.js

Trong index.js, tạo thành phần của bạn. Trong ví dụ dưới ddaa, chúng ta sẽ thêm một thành phần <Text> đơn giản bên trong <View>

import React from 'react';
import {AppRegistry, StyleSheet, Text, View} from 'react-native';

class RNHighScores extends React.Component {
  render() {
    var contents = this.props['scores'].map((score) => (
      <Text key={score.name}>
        {score.name}:{score.value}
        {'
'}
      </Text>
    ));
    return (
      <View style={styles.container}>
        <Text style={styles.highScoresTitle}>2048 High Scores!</Text>
        <Text style={styles.scores}>{contents}</Text>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#FFFFFF',
  },
  highScoresTitle: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
  scores: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  },
});

// Module name
AppRegistry.registerComponent('RNHighScores', () => RNHighScores);

RNHighScores là tên của một module sẽ được sử dụng khi bạn thêm một view vào React Native từ bên trong ứng dụng iOS

(Hết phần 1) Nguồn tham khảo: Integration with Existing Apps