流程
Android原生
- 创建一个View
CircleView
; - 创建
CircleManager
类并继承SimpleViewManager
; - 创建
AppReactPackage
类并实现ReactPackage
,在createViewManagers
方法中返回CircleManager
的实例。
JS
- 创建
circle.js
文件; - 通过
requireNativeComponent
创建变量RCTCircle
;
Java代码
CircleView.java
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
canvas.drawCircle(mRadius, mRadius, mRadius, mPaint); // 画一个半径为100px的圆
}
CircleManager.java
public class CircleManager extends SimpleViewManager<CircleView> {
@Override
public String getName() {
return "MCircle";
}
@Override
protected CircleView createViewInstance(ThemedReactContext reactContext) {
return new CircleView(reactContext);
}
/**
* 传输背景色参数
*/
@ReactProp(name = "color")
public void setColor(CircleView view, Integer color) {
view.setColor(color);
}
/**
* 传输半径参数
*/
@ReactProp(name = "radius")
public void setRadius(CircleView view, Integer radius) {
view.setRadius(radius);
}
}
AppReactPackage.java
public class AppReactPackage implements ReactPackage {
@Override
public List<NativeModule> createNativeModules(ReactApplicationContext reactContext) {
return Collections.emptyList();
}
@Override
public List<ViewManager> createViewManagers(ReactApplicationContext reactContext) {
return Arrays.<ViewManager>asList(new CircleManager());
}
}
Activity
mReactInstanceManager = ReactInstanceManager.builder()
.setApplication(getApplication())
.setBundleAssetName("index.android.bundle")
.setJSMainModulePath("index")
.addPackage(new MainReactPackage())
.addPackage(new AppReactPackage())
.setUseDeveloperSupport(BuildConfig.DEBUG)
.setInitialLifecycleState(LifecycleState.RESUMED)
.build();
JS代码
circle.js
import React, { Component } from "react";
import PropTypes from "prop-types";
import { View, requireNativeComponent } from "react-native";
//requireNativeComponent函数中的第一个参数就是刚刚CircleManager.getName返回的值。
const RCTCircle = requireNativeComponent("MCircle", {
propTypes: {
color: PropTypes.number,
radius: PropTypes.number,
...View.propTypes // 包含默认的View的属性
}
});
module.exports = RCTCircle;
UI.js
<RCTCircle
style={{
width: 100,
height: 100,
position: "absolute",
right: 0,
top: 80
}}
color={processColor("#ff0000")}
radius={50}
/>