在之前的一篇文章中，我記錄了已有的Android專案如何接入React Native，介紹了RN如何呼叫原生的方法，本篇文章上在之前的一篇的文章的基礎上續寫的，這一篇文章中我將記錄Android如何封裝原生元件，然後RN來使用它。如果對接入RN還不太瞭解的，可以看看我的另一篇文章 Android原生專案接入React Native

其實，如果Android接入RN已經搞好了，這個就不難弄了，都是類似的，下面先大致介紹一下如何使用原生UI元件的，圖解如下：

從圖中可以很清楚地看到實現步驟，具體如何實現，下面一步一步來介紹：

• Step1 繼承SimpleViewManager 程式碼如下：

public class NativePaintViewManager extends SimpleViewManager<MyPaintView> {

    public static final String REACT_CLASS = "RCTMyPaintView";


    @Override
    public String getName() {
        return REACT_CLASS;
    }

    @Override
    protected MyPaintView createViewInstance(ThemedReactContext reactContext) {
        return new MyPaintView(reactContext);
    }

    @ReactProp(name = "color")
    public void setColor(MyPaintView paintView, String color) {
        paintView.setColor(color);
    }


    @ReactProp(name = "raduis")
    public void setRaduis(MyPaintView paintView, Integer raduis) {
        paintView.setRaduis(raduis);
    }

}
 

說明一下，這裡的SimpleViewManager指定的型別為MyPaintView，這個MyPaintView就是Android自定義的一個View，我簡單的畫了一個圓，提供的屬性有 color，raduis 分別表示圓的顏色以及半徑大小，注意需要用@ReactProp註解。接下來介紹一下MyPaintView

• step2 自定義MyPaintView的實現

public class MyPaintView extends View {
    /**
     * 畫筆
     */
    private Paint mPaint;

    /**
     * 圓的半徑
     */
    private float raduis=100;

    /**
     * view的寬和高
     */
    private int width;
    private int height;


    public MyPaintView(Context context) {
        this(context, null);
    }

    public MyPaintView(Context context, AttributeSet attrs) {
        this(context, attrs, 0);
    }

    public MyPaintView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);

        mPaint = new Paint();
        mPaint.setColor(Color.BLUE);
        mPaint.setStrokeWidth(50);

    }

    @Override
    protected void onSizeChanged(int w, int h, int oldw, int oldh) {
        super.onSizeChanged(w, h, oldw, oldh);
        width = w;
        height = h;
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);

        canvas.translate(width / 2, height / 2);
        canvas.drawCircle(0, 0, raduis, mPaint);
    }

    /**
     * 設定顏色
     */
    public void setColor(String color) {

        mPaint.setColor(Color.parseColor(color));
        invalidate();
    }

    /**
     * 設定圓的 半徑
     */
    public void setRaduis(Integer raduis) {
        this.raduis = raduis;
        invalidate();
    }
}
 

這裡 我就簡單的畫了一個圓，對外提供了設定顏色跟設定半徑兩個方法，當RN引用這個元件的時候，就可以將這兩個方法轉化成對應的屬性了，在js中使用就很簡單了

• step3 把這個檢視管理類註冊到應用程式包的createViewManagers裡 在MyReactPackage中修改

public class MyReactPackage implements ReactPackage {

    @Override
    public List<NativeModule> createNativeModules(ReactApplicationContext reactContext) {

        List<NativeModule> modules = new ArrayList<>();
        //將我們建立的類新增進原生模組列表中
        modules.add(new MyNativeModule(reactContext));
        return modules;
    }


    @Override
    public List<Class<? extends JavaScriptModule>> createJSModules() {

        //返回值需要修改
        return Collections.emptyList();
    }


    @Override
    public List<ViewManager> createViewManagers(ReactApplicationContext reactContext) {

        //返回值需要修改
//        return Collections.emptyList();

        // 因為自定義的原生View，需要返回native的ViewManager
        return Arrays.<ViewManager>asList(new NativePaintViewManager());

    }
}

• step4 定義Java和JavaScript之間的介面層 NativePaintView.js

import { PropTypes } from 'react';
import { requireNativeComponent, View } from 'react-native';

var iface = {
  name: 'RCTMyPaintView',
  propTypes: {

    color: PropTypes.string,
    raduis: PropTypes.number,
    ...View.propTypes // 包含預設的View的屬性
  },
};

module.exports = requireNativeComponent('RCTMyPaintView', iface);

注意在這裡需要指定color、raduis的屬性，分別用PropTypes.string跟PropTypes.number表示，這樣的話，在別的地方就可以引用這個元件了

• step5 使用這個元件

    //匯入元件
    import PaintView from './NativePaintView';

    // 使用
     <PaintView style={styles.paintview}
                               color={"#FF5984"}
                               raduis={100}
                    />

最後看下效果：