当前位置:首页>开发>正文

React-Native-Android怎么封装原生组件 react native android 怎么封装工具类

2023-05-08 00:23:47 互联网 未知 开发

 React-Native-Android怎么封装原生组件 react native android 怎么封装工具类

React-Native-Android怎么封装原生组件

提供原生视图很简单:
创建一个ViewManager的子类(或者更常见的,SimpleViewManage的派生类)。
实现createViewInstance方法。
导出视图的属性设置器:使用@ReactProp(或@ReactPropGroup)注解。
把这个视图管理类注册到应用程序包的createViewManagers里。
实现JavaScript模块。
在开始之前,先创建一个工程,命令如下:
React-native init NativeView

第一步. 创建ViewManager的子类MyTextViewManager
第二步.实现方法createViewInstance

第三步. 通过@ReactProp(或@ReactPropGroup)注解来导出属性的设置方法

上面三步中MyTextViewManager的整个代码如下:

public class MyTextViewManager extends SimpleViewManager{ @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时,需要实现这三个方法,学过导入原生模块部分时我们应该很熟悉了。封装的原生模块放在createNativeModules里,封装的原生UI组件放在createViewManagers里。需要注意的是剩下的最后一个方法createJSModules里默认是返回null,要改成返回空集合,否则编译时会报错。 代码如下: public class MyReactPackage implements ReactPackage { @Override public List createNativeModules(ReactApplicationContext reactContext) { return Collections.emptyList() } @Override public List> createJSModules() { return Collections.emptyList() } @Override public List createViewManagers(ReactApplicationContext reactContext) { return Arrays.asList( new MyTextViewManager() ) } } MyReactPackage还需要在MainApplication.java文件的getPackages方法中提供。这个文件位于你的react-native应用文件夹的android目录中。具体路径是: android/app/src/main/java/com/your-app-name/MainApplication.java. @Override protected List getPackages() { return Arrays.asList( new MainReactPackage(), new MyReactPackage() ) } 第五步:实现对应的JS模块。 最后一步就是创建JavaScript模块并且定义Java和JavaScript之间的接口层。大部分过程都由React底层的Java和JavaScript代码来完成,你所需要做的就是通过propTypes来描述属性的类型。 新建一个MyTextView.js文件。代码如下: import { PropTypes } from react import {requireNativeComponent,View} fromreact-native var myTextView ={ name:MyTextView, propTypes:{ text:PropTypes.string, textSize:PropTypes.number, textColor:PropTypes.number, isAlpha:PropTypes.bool, ...View.propTypes // 包含默认的View的属性 } } module.exports =requireNativeComponent(MyTextView,myTextView) 最后:然后你就可以在js代码中引用刚才的组件了,

react native android 怎么封装工具类

一、生成签名文件(类似于Android的签名文件)

1、命令行到你的工程目录下

2、在命令行中输入如下代码

[javascript] view plain copy
keytool -genkey -v -keystore SuperBigLw-key.keystore -alias SuperBigLw-key-alias -keyalg RSA -keysize 2048 -validity 10000
这里的第一个SuperBigLw就是文件的名字,第二个是别名。
10000是有效时间,2048是RSA加密的大小