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);

image.png