虽然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 {

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

...

style={styles.noLoginImg} url={headerPic}>

...

用这样的封装方法,可以让所有的原生View都可以移植到RN平台中.