本机 UI 组件未显示在 React Native 中答案

【问题标题】：Native UI component not showing up in React Native本机 UI 组件未显示在 React Native 中
【发布时间】：2017-10-14 20:55:30
【问题描述】：

我正在尝试在 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
};

我看到“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：使用 appParams 运行应用程序“CustomViewTest”：{"initialProps":{},"rootTag":1}。 DEV === true，开发级警告开启，性能优化关闭

我猜需要有一种方法来指定自定义视图的宽度和高度？无法在网上找到执行此类操作的具体示例。

【问题讨论】：

使用import { requireNativeComponent, View, Text, ViewPropTypes } from 'react-native';
你有没有发现哪里出了问题？

标签： java android react-native react-native-android

【解决方案1】：

试试这个：-

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

我认真地在网上工作了2个小时，终于找到了方法。只需要使用 style 属性来调整宽度和高度。现在，我很高兴，也很恼火，我以前没有想到这一点。希望这可以帮助到这里的任何其他人。

【讨论】：