React-Native-Android怎么封装原生组件
发布网友
发布时间：2022-04-25 12:53
共1个回答
热心网友
时间：2022-04-20 00:47
提供原生视图很简单：
创建一个ViewManager的子类（或者更常见的，SimpleViewManage的派生类）。
实现createViewInstance方法。
导出视图的属性设置器：使用@ReactProp（或@ReactPropGroup）注解。
把这个视图管理类注册到应用程序包的createViewManagers里。
实现JavaScript模块。
在开始之前，先创建一个工程，命令如下：
React-native init NativeView
第一步. 创建ViewManager的子类MyTextViewManager
第二步.实现方法createViewInstance
第三步. 通过@ReactProp（或@ReactPropGroup）注解来导出属性的设置方法
上面三步中MyTextViewManager的整个代码如下：
public class MyTextViewManager extends SimpleViewManager<TextView> {
@Override
public String getName() {
return "MyTextView";
}
@Override
protected TextView createViewInstance(ThemedReactContext reactContext) {
TextView textView = new TextView(reactContext);
return textView;
}
@ReactProp(name = "text")
public void setText(TextView view, String text) {
view.setText(text);
}
@ReactProp(name = "textSize")
public void setTextSize(TextView view, float fontSize) {
view.setTextSize(fontSize);
}
@ReactProp(name = "textColor", defaultInt = Color.BLACK)
public void setTextColor(TextView view, int textColor) {
view.setTextColor(textColor);
}
@ReactProp(name = "isAlpha", defaultBoolean = false) public void setTextAlpha(TextView view, boolean isAlpha) {
if (isAlpha) {
view.setAlpha(0.5f); }
}}
第四步：注册MyTextViewManager。
创建类MyReactPackage，实现ReactPackage的方法createViewManager，在该方法中注册上面的组件MyTextViewManager。实现ReactPackage时，需要实现这三个方法，学过导入原生模块部分时我们应该很熟悉了。封装的原生模块放在createNativeMoles里，封装的原生UI组件放在createViewManagers里。需要注意的是剩下的最后一个方法createJSMoles里默认是返回null，要改成返回空集合，否则编译时会报错。
代码如下：
public class MyReactPackage implements ReactPackage {
@Override
public List<NativeMole> createNativeMoles(ReactApplicationContext reactContext) {
return Collections.emptyList();
}
@Override
public List<Class<? extends JavaScriptMole>> createJSMoles() {
return Collections.emptyList();
}
@Override
public List<ViewManager> createViewManagers(ReactApplicationContext reactContext) {
return Arrays.<ViewManager>asList(
new MyTextViewManager()
);
}
}
MyReactPackage还需要在MainApplication.java文件的getPackages方法中提供。这个文件位于你的react-native应用文件夹的android目录中。具体路径是: android/app/src/main/java/com/your-app-name/MainApplication.java.
@Override
protected List<ReactPackage> getPackages() {
return Arrays.<ReactPackage>asList(
new MainReactPackage(),
new MyReactPackage()
);
}
第五步：实现对应的JS模块。
最后一步就是创建JavaScript模块并且定义Java和JavaScript之间的接口层。大部分过程都由React底层的Java和JavaScript代码来完成，你所需要做的就是通过propTypes来描述属性的类型。
新建一个MyTextView.js文件。代码如下：
import { PropTypes } from 'react';
import {requireNativeComponent,View} from'react-native';
var myTextView ={
name:'MyTextView',
propTypes:{
text:PropTypes.string,
textSize:PropTypes.number,
textColor:PropTypes.number,
isAlpha:PropTypes.bool,
...View.propTypes // 包含默认的View的属性
}
}
mole.exports =requireNativeComponent('MyTextView',myTextView);
最后：然后你就可以在js代码中引用刚才的组件了，
