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，否则不能显示出来