27
2017
09

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

这里写图片描述

上一篇:android使用opensl es进行简单的音频播放 下一篇:Handler消息机制(Java层)