我正在尝试在React Native中显示以下自定义原生UI组件

RectangleView.java

public class RectangleView extends View {

    Paint mRectPaint;

    public RectangleView(Context context) {
        super(context);
        init();
    }

    private void init() {
        mRectPaint = new Paint();
        mRectPaint.setColor(Color.BLUE);
        mRectPaint.setStyle(Paint.Style.FILL);
    }

    public void setColor(String color) {
        // mRectPaint.setColor(Color.parseColor(color));
        postInvalidate();
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);

        canvas.drawRect(0, 0, 500, 500, mRectPaint);
    }
}

字符串
这是我的React代码中的 Package 器

RectangleView.js

import React, { Component, PropTypes } from 'react';
import { requireNativeComponent, View, Text } from 'react-native';

const RCTRectangleView = requireNativeComponent('RCTRectangleView', RectangleView);

export default class RectangleView extends React.Component {
    constructor(props) {
        super(props);
    }
    render() {
        return (
        
            <View>
                <Text> Hello world </Text>
                <RCTRectangleView {...this.props} />
            </View>

        );
    }
}

RectangleView.propTypes = {
    ...View.propTypes,
    color: PropTypes.string
};

型
我看到了“Hello World”，但没有看到我期望看到的蓝色矩形。我的控制台中仅有的消息是
05-15 16：18：02.299 10937 10969 W ReactNativeJS：警告：View.propTypes已被弃用，并将在未来版本的ReactNative中删除。请改用ViewPropTypes。
05-15 16：18：02.316 10937 10969 I ReactNativeJS：正在运行应用程序“CustomViewTest”，appParams：{“initialProps”：{}，“rootTag”：1}.DEV= true，开发级别警告为ON，性能优化为OFF
我猜需要有一种方法来指定自定义视图的宽度和高度？无法找到一个具体的例子在线这样做。