react-native - puedo - react funciones

Componente de interfaz de usuario de tamaño dinámico nativo para React Native

Question

Quiero construir un componente nativo de reacción de iOS: análogo de texto, donde no se conoce el ancho ni el alto, pero se calcula dinámicamente según su contenido. Como veo por la depuración, el método RCTText.drawRect se llama con rect calculado, pero mi componente se llama con rect vacío si no definí los tamaños mediante estilos.

¿Cómo definir el rect necesario para la vista personalizada?

Answer 1

La respuesta está en el concepto de vista "a la sombra". Parece que no está documentado, pero React Native usa vistas en "sombra" para calcular el diseño antes de la representación real. Así que la clase RCTShadowText se usa para el diseño de la etiqueta y su función RCTMeasure:

static css_dim_t RCTMeasure(void *context, float width)
{
  RCTShadowText *shadowText = (__bridge RCTShadowText *)context;
  NSTextStorage *textStorage = [shadowText buildTextStorageForWidth:width];
  NSLayoutManager *layoutManager = textStorage.layoutManagers.firstObject;
  NSTextContainer *textContainer = layoutManager.textContainers.firstObject;
  CGSize computedSize = [layoutManager usedRectForTextContainer:textContainer].size;

  css_dim_t result;
  result.dimensions[CSS_WIDTH] = RCTCeilPixelValue(computedSize.width);
  if (shadowText->_effectiveLetterSpacing < 0) {
    result.dimensions[CSS_WIDTH] -= shadowText->_effectiveLetterSpacing;
  }
  result.dimensions[CSS_HEIGHT] = RCTCeilPixelValue(computedSize.height);
  return result;
}

Answer 2

Puede usar la propiedad onLayout en la vista de texto y ver si tiene más líneas que le gustaría tener. Entonces harías lo siguiente:

1. use un ancho inicial para el elemento de texto
2. esperar a que onLayout y calcular cuánto ancho necesitaría su componente de texto en función de las dimensiones renderizadas
3. establece el ancho calculado, lo que provoca una redención con el ancho calculado