Вертикальное центрирование текста над изображениями в React Native с Flexbox

Вертикальное и горизонтальное центрирование - одна из тех вещей, которые всегда возникают в дизайне, и, к счастью, в последние пару лет мы начали улучшать ее решения.

В Интернете для меня обычной практикой было использовать абсолютное позиционирование текста с

left: 50%, top: 50%, transform: translate(-50%,-50%)

стиль, чтобы он располагался по центру изображения.

Однако, если вы не используете одну из последних версий react native, у вас нет доступа к процентам, и, скорее всего, вы используете flexbox по умолчанию для макета. Вот простая альтернатива:

<View
  style={styles.container}
>
  <Image
    source={{uri: 'https://images.unsplash.com/photo-1424819827928-55f0c8497861?fit=crop&w=600&h=600'}}
    style={styles.image}
  >
      <Text
        style={styles.paragraph}
      >
        TITLE
      </Text>
  </Image>
</View >
    );
  }
}
const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'stretch',
    justifyContent: 'center',
  },
  image: {
    flexGrow:1,
    height:null,
    width:null,
    alignItems: 'center',
    justifyContent:'center',
  },
  paragraph: {
    textAlign: 'center',
  },
});

В React Native компонент изображения может инкапсулировать текстовый компонент, поэтому нет необходимости устанавливать z-индекс. Если вы не хотите беспокоиться о размерах изображения, вы можете указать flexGrow, чтобы оно заполняло свой контейнер, и обнулить высоту и ширину, чтобы инкапсулированный текстовый компонент мог правильно выровняться по центру.

Если вы хотите увидеть живой пример, попробуйте новую супер полезную утилиту Sketch для игровой площадки от Exponent. Он похож на CodePen для React Native и упрощает тестирование простых набросков на устройстве.