第四章、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);