第四章、ReactNative组件的封装

ReactNative组件的封装

官网地址https://facebook.github.io/react-native/docs/native-components-android.html

封装原生组件的步骤

1.创建一个ViewManager的子类。

2.实现createViewInstance方法。

3.导出视图的属性设置器：使用@ReactProp（或@ReactPropGroup）注解。

4.把这个视图管理类注册到应用程序包的createViewManagers里。

5.实现JavaScript模块。

第一步、创建ViewManager

public class XNButtonManager extends SimpleViewManager<CommonButton> {
@Override
public String getName() {
return "CommonButton"; //1.CommonButton为现有自定义控件，对应RN中注册组件的名称;
}

@Override
protected CommonButton createViewInstance(ThemedReactContext reactContext) {
return new CommonButton(reactContext);//2.需要实现该接口，返回自定义控件的实例对象;
}

@ReactProp(name = "type") //设置按钮类型
public void setType(CommonButton button, int type) {
button.setButtonType(type);
button.invalidate();
}

@ReactProp(name = "radius")
public void setRadius(CommonButton button, float radius) {
button.setRadius(radius);
button.invalidate();
}

@ReactProp(name = "frameColor")
public void setFrameColor(CommonButton button, String frameColor) {
button.setButtonFrameColor(frameColor);
button.invalidate();
}

@ReactProp(name = "fillColor")
public void setFillColor(CommonButton button, String fillColor) {
button.setButtonFillColor(fillColor);
button.invalidate();
}

@ReactProp(name = "text")
public void setText(CommonButton button,String text){
button.setText(text);
button.setGravity(Gravity.CENTER);
button.invalidate();
}

@ReactProp(name = "textColor")
public void setTextColor(CommonButton button,String textColor){
button.setTextColor(Color.parseColor(textColor));
button.invalidate();
}

@ReactProp(name ="frameWidth")
public void setFrameWidth(CommonButton button,int frameWidth){
button.setButtonFrameWidth(frameWidth);
button.invalidate();
}
}

第二步、实现createViewManagers接口方法

public class XNReactPackage implements ReactPackage {

@Override
public List<ViewManager> createViewManagers(ReactApplicationContext reactContext) {
return Arrays.<ViewManager>asList(
new XNButtonManager() //在这里添加自定义控件的Manager实例对象;
);
}
}

第三步、注册ReactNative组件

在RN项目根目录下新建CommonButton.js文件

'use strict'

import PropTypes from 'prop-types';
import { requireNativeComponent, View } from 'react-native';

//定义组件的属性及类型
var CommonButton = {
name : "CommonButton",
propTypes : {
type : PropTypes.number,
frameColor: PropTypes.string,
fillColor : PropTypes.string,
radius : PropTypes.number,
text : PropTypes.string,
frameWidth: PropTypes.number,
textColor : PropTypes.string,
...View.propTypes
}
}
//导出组件
module.exports = requireNativeComponent("CommonButton",CommonButton);

第四步、在RN中使用导出的组件

import CommonButton from '../modlue/CommonButton';
... ...
export default class Welcome extends Component {

constructor(props) {
super(props);
}

render() {
return (

<View style={styles.container}>
<CommonButton
type = { 1 }//1 fill,2: stroke
fillColor="#ff0000"
frameColor="#ff0000"
frameWidth={ 2 }
radius={ 15 }
text = "自定义按钮"
textColor="#FFFFFF"
style = { styles.commonButton }
/>

<Button
style={styles.button}
onPress={() => this.transfer()}
title="首页"
/>
</View>
);
}

const styles = StyleSheet.create({
commonButton : {
width:150,
height:50
}
});

AppRegistry.registerComponent('Welcome', () => Welcome);