React-Native Native UI 组件不调整大小（Android）

Question

我对 React Native 有关于 Android Native UI 组件高度的问题。 我创建了一个非常简单的用例来演示这个问题。

React Native 版本 = 0.61.5。

Android，React Native ViewManager：

public class CustomTextViewManager extends SimpleViewManager<TextView> {

    @NonNull
    @Override
    protected TextView createViewInstance(@NonNull ThemedReactContext reactContext) {
        return new TextView(reactContext);
    }

    @NonNull
    @Override
    public String getName() {
        return "CustomTextView";
    }

    @ReactProp(name = "text")
    public void setText(TextView view, String text) {
        view.setText(text);
    }
}

JavaScript，原生视图参考：

import {requireNativeComponent} from 'react-native';

const CustomTextView = requireNativeComponent('CustomTextView')

export default CustomTextView;

JavaScript，简单的应用程序：

import React from 'react';
import CustomTextView from './CustomTextView';

const App: () => React$Node = () => {
  return (
    <CustomTextView
      text={'Some test text'}
    />
  );
};

export default App;

当您运行此代码时，不会显示任何内容。 添加 style={{height: 100}} 后，视图以提供的固定高度显示。

我实际上预计 Android View 的高度会反映在 React Native 中。 显然情况并非如此。

注意：高度：“自动”不起作用。 我希望有人能告诉我我错过了什么。

Answer 1

我最近遇到了同样的问题。 您需要使用阴影节点来测量 TextView 在文本渲染后的最终大小。 我找到了一篇关于这个的好文章。 点我

如果您的 TextView 将只渲染简单的文本，您可以只使用 ReactTextShadowNode，它是 react native 的本地库的一部分。

为此，只需覆盖 ViewManager 的 createShadowNodeInstance 方法并返回 ReactTextShadowNode 的实例。

    override fun createShadowNodeInstance(): ReactTextShadowNode {
        return ReactTextShadowNode(null)
    }

如果你的 TextView 必须渲染一些特殊的 Span，你需要编写自己的 ShadowNode 实现。 我通过处理 ReactTextShadowNode 并改变了字段 mPreparedSpannableText 的方式来做到这一点。 该字段保存将用于测量所需高度的跨度。

例如。 你可以使用类似的东西

    @ReactProp(name = "text")
    fun setText(text: String?) {
        this.text = text ?: ""
        mPreparedSpannableText = useYourMethodToCreateYourSpannable()
        dirty()
    }

这篇文章很老，但我希望我的回答能帮助面临同样问题的人。