[번역] React Native에서 Native UI Component를 사용해보자（Android편）

서드파티의 네이티브용 SDK로 만든 컴포넌트를 React Native 에서 사용하고 싶어서 조사해봤습니다.  공식은 영어를 읽을 수 있다고 해도 설명이 부족하거나 쓸데없는 내용이 많아서 이해하기 힘들다고 생각했습니다.

저는 안드로이드 자바 초심자이기 때문에 나쁘게 생각하지 말아주세요.  프로퍼티 설정이나, 타 API 사용은이런저런 설정이 필요합니다.

iOS는 이쪽에서 확인해주세요.

공식 문서

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

가장 심플한 코드

1. Native Component의 Name 과 View 인스턴스를 반환하는 Manager 클래스를 작성합니다.
2. Manager클래스（그리고 다른 Java module）를 포괄하는 Package를 작성
3. Package를 MainApplication.java 에 등록
4. Manager클래스에서 지정한 이름을 사용해서 JavaScript에서 호출한다.

ExampleManager.java

package com.example;

import android.widget.TextView;
import com.facebook.react.uimanager.SimpleViewManager;
import com.facebook.react.uimanager.ThemedReactContext;

public class ExampleManager extends SimpleViewManager<TextView> {
    public static final String REACT_CLASS = "Example";

    // Component name that will be called from JavaScript
    @Override
    public String getName() {
        return REACT_CLASS;
    }

    // Return the view component instantiated with Activity context
    @Override
    public TextView createViewInstance(ThemedReactContext reactContext) {
        TextView mTextView = new TextView(reactContext.getCurrentActivity());
        return mTextView;
    }
}

ExamplePackage.java

package com.example;

import java.util.Arrays;
import java.util.List;
import com.facebook.react.ReactPackage;
import com.facebook.react.bridge.ReactApplicationContext;
import com.facebook.react.uimanager.ViewManager;

public class ExamplePackage implements ReactPackage {
    // Expose Java components to JavaScript
    @Override
    public List<ViewManager> createViewManagers(ReactApplicationContext reactContext) {
      return Arrays.<ViewManager>asList(
          new ExampleManager()
      );
    }
}

MainApplication.java

public class MainApplication extends Application implements ReactApplication {

    ...

    // Register the new package
    @Override
    protected List<ReactPackage> getPackages() {
      return Arrays.<ReactPackage>asList(
          new MainReactPackage(),
          new ExamplePackage() // New
      );
    }

    ...

}

App.js

import React from 'react';
import { requireNativeComponent } from 'react-native';

const Example = requireNativeComponent('Example', null);

export default class App extends React.Component {
  render() {
    return (
      <Example />
    );
  }
});