React Native 封装Android 原生View

虽然React Native平台已经为我们封装了大多数常用的控件,但总有一些我们需要的特殊控件,或者比较小众的控件是没有的.

既然平台没有,那咱自己来呗.

封装单个View

在React Native中有一个Image控件,是用来显示图片的,但功能并不是很强大.例如我在做QQ登录授权回调的时候,会返回给我用户的qq头像,它是这样的格式:http://q.qlogo.cn/qqapp/1104930988/707B047664976D4AAE8A205CD1C9B64F/100, 用Image控件是显示不出来的,但我之前的APP用原生的fresco是没有问题的. 没办法,只能自己包装一个支持这种格式的控件给RN使用.

step 1: 在Android Studio 编写一个供RN端调用的控件.新建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端调用
        return REACT_NAME;
    }
    //实例化控件,设置相关属性并返回
    @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;
    }
    //设置该控件的一个属性
    @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平台中.