Как измерить пользовательский нативный компонент в React Native на Android

Я хочу создать собственный собственный компонент, который отображает одну строку текста. Длина этого текста является динамической, а шрифт и размер настраиваются.

Когда я помещаю свой пользовательский компонент в стандартный <View />, предоставленные ограничения размера в View.onMeasure (собственный) равны нулю для высоты, а это MeasureSpec.EXACTLY. Возврат любой ненулевой высоты в View.onMeasure ничего не делает.

class App extends React.Component<{}, undefined> {
  render() {
    return (
      <View style={{
          flex: 1,
        }}>
        <CustomComponent />
      </View>
    )
  }
}

Как разрешить моему собственному нативному представлению измерять себя и предоставлять его React Native во время измерения и компоновки?


person Nick Marais    schedule 27.07.2017    source источник
comment
Вы пробовали minHeight ?   -  person Rohan Kangale    schedule 27.07.2017


Ответы (1)


Спустя много времени и усилий я нашел ответ.

Вам нужно переопределить ViewManager.getShadowNodeClass и предоставить пользовательскую реализацию ReactShadowNode.

Вот так;

public class CustomShadowNode extends LayoutShadowNode implements YogaMeasureFunction {
    public CustomShadowNode() {
        this.setMeasureFunction(this);
    }

    @Override
    public long measure(
      YogaNode node,
      float width, YogaMeasureMode widthMode,
      float height, YogaMeasureMode heightMode) {
      return YogaMeasureOutput.make(0, 0);
    }
}

Я использовал LayoutShadowNode, так как он, кажется, обрабатывает стандартный макет и стили.

Подробнее об этом я написал здесь.

person Nick Marais    schedule 27.07.2017
comment
Я пробую это для себя, и я даже не нахожу вызов конструктора моего теневого узла, не говоря уже о функции измерения. - person Gabe Sechan; 13.02.2018
comment
Большое спасибо за то, что пролили свет на это. В настоящее время я нахожусь в ситуации, когда я пытаюсь измерить собственный компонент пользовательского интерфейса Android, который расширяет ReactRootView, но ни onLayout, ни onMeasure не работают, поэтому компонент остается невидимым. Любая идея, что я могу сделать, чтобы измерить это? Спасибо - person SudoPlz; 11.04.2018
comment
Я не пробовал расширять ReactRootView с помощью этого подхода. Возможно, есть какая-то логика, которая заставляет это представление работать по-другому. Я предлагаю поднять вашу проблему как новый вопрос и сослаться на этот вопрос, чтобы предоставить некоторую информацию. - person Nick Marais; 16.04.2018