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)}
            />
        );
    }
    

    }


登录后回复