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