react native 怎么掉ios 原生

需要React Native已经提供少UI控件仍需要我自定义UI控件集React Native本文已ImageView例ImageView集React使JS使用Android ImageView
Native view通继续ViewManager类创建管理React Native提供SimpleViewManager类便使用SimpleViewManager已经提供些基本属性背景色透明度Flexbox布局相关封装
步骤：
创建ViewManager类
实现createViewInstance
使用@ReactProp注解声明JS访问属性
注册ViewManager
实现JavaScript组件
创建ViewManager类
public class MyReactImageManager extends SimpleViewManager {
public static final String REACT_CLASS = "MyRCTImageView";

//返名字用于JavaScript引用View type
@Override
public String getName(){
return REACT_CLASS;
}
...
}12345678910

实现createViewInstance
@Override
public ImageView createViewInstance(ThemedReactContext context){
return new ImageView(context);
}1234

使用@ReactProp声明JS使用属性
使用@ReactProp(或@ReactPropGroup)注解定义些JavaScript使用属性setter
属性设置第参数前View类型（本例ImageView),第二参数属性值设置应该声明public void类型
前支持属性类型：boolean, int, float, double, String, Boolean, Integer, ReadableArray, ReadableMap
注解@ReactProp类型Stringname参数JS通注解name调用设置
除name属性外@ReactProp其选属性：defaultBoolean, defaultInt, defaultFloat(应boolean, int, float)js没显示指定值使用值default值目前支持基本类型于其复杂类型默认值null
//使用@ReactProp或@ReactPropGroup声明些Javascript使用setter
@ReactProp(name = "src")
public void setSrc(final ImageView view, @Nullable final String src){
new Thread(new Runnable() {
@Override
public void run() {
final Bitmap bitmap = getBitmap(src);
view.post(new Runnable() {
@Override
public void run() {
view.setImageBitmap(bitmap);
}
});
}
}).start();
}

@ReactProp(name = ViewProps.RESIZE_MODE)
public void setResizeMode(ImageView view, @Nullable String resizeMode){
ImageView.ScaleType scaleType = ImageView.ScaleType.CENTER;

if ("contain".equals(resizeMode)) {
scaleType = ImageView.ScaleType.CENTER_INSIDE;
}
...

view.setScaleType(scaleType);
}12345678910111213141516171819202122232425262728

注册ViewManager
@Override
public List createViewManagers( ReactApplicationContext reactContext)
{
return Arrays.asList( new ReactImageManager() );
}12345

实现JavaScript module
// ImageView.js

var { requireNativeComponent, PropTypes } = require('react-native');

var iface = {
name: 'ImageView',
propTypes: {
src: PropTypes.string,
resizeMode: PropTypes.oneOf(['cover', 'contain', 'stretch']),
},
};

module.exports = requireNativeComponent('RCTImageView', iface, {nativeOnly:{
'scaleX': true,
'scaleY': true,
'testID': true,
'decomposedMatrix': true,
'backgroundColor': true,
'accessibilityComponentType': true,
'renderToHardwareTextureAndroid': true,
'translateY': true,
'translateX': true,
'accessibilityLabel': true,
'accessibilityLiveRegion': true,
'importantForAccessibility': true,
'rotation': true,
'opacity': true,
}});12345678910111213141516171819202122232425262728

JavaScript使用UI控件
//引入模块
var ImageView = require('./ImageView.js');

...
render() {
return (

...

)
}123456789101112

期间遇错误
ImageView.js导模块module.exports = requireNativeComponent(‘RCTImageView’, iface)
遇‘ImageView’ has no propType for native prop ‘RCTImageView.scaleX’ of native type ‘number’

原：所使用基类SimpleViewManager定义量@ReactProp属性声明些属性需要js模块需要声明
解决：requireNativeComponent带第三参数所属性指定
module.exports = requireNativeComponent('RCTImageView', iface, {nativeOnly:{
'scaleX': true,
...
}});