react native调用android原生的自定义view不显示
-
我时按照官网配置文档,进行java代码实现了public class CircleManager extends SimpleViewManager<CircleView> {
/** * 设置js引用名 */ @Override public String getName() { return "MCircle"; } /** * 创建UI组件实例 */ @Override protected CircleView createViewInstance(ThemedReactContext reactContext) { return new CircleView(reactContext); }
// /**
// * 传输背景色参数
// */
// @ReactProp(name = "color")
// public void setColor(CircleView view, Integer color) {
// view.setColor(color);
// }/** * 传输半径参数 */ @ReactProp(name = "radius") public void setRadius(CircleView view, Integer radius) { view.setRadius(radius); }
}
public class AppReactPackage implements ReactPackage {@Override public List<NativeModule> createNativeModules(ReactApplicationContext reactContext) { return Collections.emptyList(); } @Override public List<Class<? extends JavaScriptModule>> createJSModules() { return Collections.emptyList(); } @Override public List<ViewManager> createViewManagers(ReactApplicationContext reactContext) { return Arrays.<ViewManager>asList( new CircleManager() ); }
}
public class MainApplication extends Application implements ReactApplication {private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) { @Override public boolean getUseDeveloperSupport() { return BuildConfig.DEBUG; } @Override protected List<ReactPackage> getPackages() { return Arrays.<ReactPackage>asList( new MainReactPackage(), new AppReactPackage() ); } }; @Override public ReactNativeHost getReactNativeHost() { return mReactNativeHost; } @Override public void onCreate() { super.onCreate(); SoLoader.init(this, /* native exopackage */ false); }
}
js端调用
import React, { Component, PropTypes } from 'react';
import {
View,
requireNativeComponent,
// processColor // 字符Color转换为数字
} from 'react-native';const MCircle = requireNativeComponent('MCircle', {
propTypes: {
// color: PropTypes.number,
radius: PropTypes.number,
...View.propTypes // 包含默认的View的属性
},
});export default class Circle extends Component {
static propTypes = { radius: PropTypes.number, // color: PropTypes.string, // 这里传过来的是string ...View.propTypes // 包含默认的View的属性 } render() { const { style, radius, color } = this.props; return ( <MCircle style={style} radius={radius} // color={processColor(color)} /> ); }
}
-
@shegang 我这边用的时候也碰到这个问题,用的是自己封装的原生控件,实际显示不出来。我这用的生成视图的方式如下:
public class RNDemoActivity extends AppCompatActivity implements DefaultHardwareBackBtnHandler { private static final int OVERLAY_PERMISSION_REQ_CODE = 101; private static final String TAG = "---"; private ReactRootView mReactRootView;//JS对应的Native的根布局 private ReactInstanceManager mReactInstanceManager;//Instance 管理器 @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); initRNRootView();//初始化RN的rootView,所有解析到的view都按规则添加到改View上 if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.M) { if (!Settings.canDrawOverlays(this)) { Intent intent = new Intent(Settings.ACTION_MANAGE_OVERLAY_PERMISSION, Uri.parse("package:" + getPackageName())); startActivityForResult(intent, OVERLAY_PERMISSION_REQ_CODE); } } } private void initRNRootView() { mReactRootView = new ReactRootView(this); mReactInstanceManager = ReactInstanceManager.builder().setApplication(getApplication()) .setBundleAssetName("index.android")//对应离线时打出来的bundle名字 .setJSMainModuleName("index.android")//对应实际的bundle中的js端的js文件名字,即js端的模块 .addPackage(new MainReactPackage())//React Native 自带的官方封装的各种控件 .addPackage(new CustomReactPackage())//--##--使用该种视图初始化方式时需要在此处add 注册自定义的ViewManager所在的包, //单在Application中注册该包应该是无效。ps:不在Applition中注册好像是也可以,就是不知道有没有别的影响 .setUseDeveloperSupport(BuildConfig.DEBUG)//BuildConfig.DEBUG 直接用debug 出现crash --- .setInitialLifecycleState(LifecycleState.RESUMED) .build(); mReactRootView.startReactApplication(mReactInstanceManager, "RNBlueMoon", null); setContentView(mReactRootView); } }
对应这边如果你也是这种方式填充的RN视图,可以把 你的AppReactPackage ,在上面的代码--##--处,add进去看看