雖然React Native平臺已經(jīng)為我們封裝了大多數(shù)常用的控件,但總有一些我們需要的特殊控件,或者比較小眾的控件是沒有的.

既然平臺沒有,那咱自己來唄.

封裝單個View

在React Native中有一個Image控件,是用來顯示圖片的,但功能并不是很強大.例如我在做QQ登錄授權(quán)回調(diào)的時候,會返回給我用戶的qq頭像,它是這樣的格式:http://q.qlogo.cn/qqapp/1104930988/707B047664976D4AAE8A205CD1C9B64F/100, 用Image控件是顯示不出來的,但我之前的APP用原生的fresco是沒有問題的. 沒辦法,只能自己包裝一個支持這種格式的控件給RN使用.

step 1: 在Android Studio 編寫一個供RN端調(diào)用的控件.新建ZbzRoundImageView.java

/**
 * Created by lijie on 16/5/25.
 */
public class ZbzRoundImageView extends SimpleViewManager<SimpleDraweeView> {

    private static final String REACT_NAME="RCZbzwlRoundImage";

    @Override
    public String getName() {
        //返回 控件的名字,以便于在RN端調(diào)用
        return REACT_NAME;
    }
    //實例化控件,設(shè)置相關(guān)屬性并返回
    @Override
    protected SimpleDraweeView createViewInstance(ThemedReactContext reactContext) {
        SimpleDraweeView sView=new SimpleDraweeView(reactContext);
        GenericDraweeHierarchyBuilder builder =
                new GenericDraweeHierarchyBuilder(reactContext.getResources());
        RoundingParams roundingParams =
                new RoundingParams();
        roundingParams.setBorder(R.color.white, 1.0f);
        roundingParams.setRoundAsCircle(true);
        GenericDraweeHierarchy hierarchy=builder.setFadeDuration(300)
                .setRoundingParams(roundingParams)
                .build();
        sView.setHierarchy(hierarchy);
        return sView;
    }
    //設(shè)置該控件的一個屬性
    @ReactProp(name = "url")
    public void setUrl(SimpleDraweeView simpleDraweeView,String url){
        KLog.e(""+url);
        simpleDraweeView.setImageURI(Uri.parse(url));
    }
}

step 2: 在RN封裝該控件.新建zbzRoundImageView.js

/**
 * Created by lijie on 16/5/25.
 */
'use strict';

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

var iface = {
    name: 'ZbzImageView',
    propTypes: {
        ...View.propTypes,
        url: PropTypes.string,
    },
};

module.exports = requireNativeComponent('RCZbzwlRoundImage', iface);

step 3: 封裝完畢后,就可直接在需要的地方使用.

import ZbzRoundImageView from '../modules/zbzRoundImageView';

...
<ZbzRoundImageView 
    style={styles.noLoginImg} url={headerPic}>
</ZbzRoundImageView>
...

用這樣的封裝方法,可以讓所有的原生View都可以移植到RN平臺中.