虽然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平台中.