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