Компонент React-Native Native UI не изменяет размер (Android)

Question

У меня проблемы с React Native, связанные с высотой компонента пользовательского интерфейса Android Native. Я создал очень простой пример использования, чтобы продемонстрировать проблему.

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.

Для этого просто переопределите метод createShadowNodeInstance вашего ViewManager и верните экземпляр ReactTextShadowNode.

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

Если ваш TextView должен отображать некоторые специальные Spanns, вам нужно написать свою собственную реализацию ShadowNode. Я сделал это, скопировав ReactTextShadowNode и изменив способ создания поля mPreparedSpannableText. Это поле содержит диапазон, который будет использоваться для измерения желаемой высоты.

например. вы могли бы использовать что-то подобное

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

Этот пост был довольно старым, но я надеюсь, что мой ответ поможет кому-то, кто столкнется с той же проблемой.