React Native 原生UI组件的基本使用

上文中提到原生模块的使用，现在来简单介绍一下原生UI组件的使用：

1. 首先定义你要显示的原生view：

package com.demo;

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Paint;
import android.view.View;

public class CircleView extends View {
    private Paint mPaint;
    public CircleView(Context context) {
        super(context);
        mPaint = new Paint();
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        canvas.drawCircle(50,50,50,mPaint);
    }
}

2.创建一个ViewManger的子类

package com.demo;
import com.facebook.react.uimanager.SimpleViewManager;
import com.facebook.react.uimanager.ThemedReactContext;

/**
 * CircleView 是一个自定义的原生视图
 */
public class DrawerCircle extends SimpleViewManager<CircleView> {
    //返回的名字会在JavaScript中引用这个原生视图类型
    @Override
    public String getName() {
        return "MyDrawerView";
    }

    //视图在createViewInstance中创建，且应当初始化设为默认的状态。
    //所有属性的设置都通过后续的updateView来进行
    @Override
    protected CircleView createViewInstance(ThemedReactContext reactContext) {
        return new CircleView(reactContext);
    }
}

3.通过@ReactProp注解来导出属性的设置方法（下面这个方法在DrawerCircle类中）

//使用注解来导出圆的半径，便于使用的地方修改
    @ReactProp(name="radius")
    public void setRadius(CircleView circleView, int radius) {
        circleView.setmRadius(radius);
    }

4.注册ViewManager：把视图控制器注册到应用中，和原生模块注册方法类似，唯一区别是我们需要写在createViewManagers方法中：

package com.demo;

import com.facebook.react.ReactPackage;
import com.facebook.react.bridge.NativeModule;
import com.facebook.react.bridge.ReactApplicationContext;
import com.facebook.react.uimanager.ViewManager;

import java.util.ArrayList;
import java.util.List;

public class MyReactPackage implements ReactPackage {

    //把我们要导出的模块放在modules中
    @Override
    public List<NativeModule> createNativeModules(ReactApplicationContext reactContext) {
        List<NativeModule> modules = new ArrayList<>();
        modules.add(new MyNativeModules(reactContext));
        return modules;
    }

    //把我们要导出的UI放在modules中
    @Override
    public List<ViewManager> createViewManagers(ReactApplicationContext reactContext) {
        List<ViewManager> modules = new ArrayList<>();
        modules.add(new DrawerCircle());
        return modules;
    }
}

5.在JS中进行调用：

 var iface = {
      name:'MyDrawerView',
      propTypes:{
        radius:PropTypes.number,
        ...View.propTypes
      }
    }
    const MyCirle = requireNativeComponent('MyDrawerView', iface);

 <MyCirle radius={30} style={{width:100, height:100}}/>

注意我们需要制定MyCircle的width和height，否则不能显示出来