3. react native调用android原生的自定义view不显示

react native调用android原生的自定义view不显示

  • S

    我时按照官网配置文档，进行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)}
        />
    );
}

    }

    0
    M
     1 条回复
  • M

    @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进去看看

    0