Question

我试图在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代码

中的包装器

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

我看到＆＃34; Hello World＆＃34;但我没有看到我期待看到的蓝色矩形。我控制台中唯一的消息是

05-15 16：18：02.299 10937 10969 W ReactNativeJS：警告：View.propTypes已被弃用，将在ReactNative的未来版本中删除。改为使用ViewPropTypes。

05-15 16：18：02.316 10937 10969 I ReactNativeJS：运行应用程序＆＃34; CustomViewTest＆＃34;使用appParams：{＆＃34; initialProps＆＃34;：{}，＆＃34; rootTag＆＃34;：1}。 DEV === true，开发级别警告为ON，性能优化为OFF

我猜是否需要一种方法来指定自定义视图的宽度和高度？无法在网上找到具体的例子。

Answer 1

尝试一下：-

<RCTRectangleView style={{ width: "75%, height: "20%" }} />

我在网上认真工作了2个小时，终于找到了出路。只需使用样式道具来调整宽度和高度。现在，我很高兴也很生气，因为我以前没有想到这一点。希望这对来这里的其他人有所帮助。

原生UI组件未显示在React Native

1 个答案: