Отображать текстовое поле с прозрачным фоном поверх изображения в React Native iOS

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

Текущий результат

Функция рендеринга

render: function(){
  return (
    <View style={styles.container}>
      <Image 
        style={styles.backdrop} 
        source={{uri: 'https://unsplash.com/photos/JWiMShWiF14/download'}}>
          <Text style={styles.headline}>Headline</Text>
      </Image>
    </View>
  );
)

Функция таблицы стилей

var styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'flex-start',
    alignItems: 'center',
    backgroundColor: '#000000',
    width: 320
  },
  backdrop: {
    paddingTop: 60,
    width: 320,
    height: 120
  },
  headline: {
    fontSize: 20,
    textAlign: 'center',
    backgroundColor: 'rgba(0,0,0,0)',
    color: 'white'
  }
});

Ответ 1

ПОЖАЛУЙСТА, ОБРАТИТЕ ВНИМАНИЕ: этот ответ теперь сильно устарел. Это применимо в день, когда React Native был открыт в 2015 году. Сегодня этот способ сделать это устарел.

Вы можете сделать это, добавив View внутри Image так:

render: function(){
  return (
    <View style={styles.container}>
      <Image 
        style={styles.backdrop} 
        source={{uri: 'https://unsplash.com/photos/JWiMShWiF14/download'}}>
          <View style={styles.backdropView}>
            <Text style={styles.headline}>Headline</Text>
          </View>
      </Image>
    </View>
  );
)

Функция таблицы стилей

var styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'flex-start',
    alignItems: 'center',
    backgroundColor: '#000000',
    width: 320
  },
  backdrop: {
    paddingTop: 60,
    width: 320,
    height: 120
  },
  backdropView: {
    height: 120,
    width: 320,
    backgroundColor: 'rgba(0,0,0,0)',
  },
  headline: {
    fontSize: 20,
    textAlign: 'center',
    backgroundColor: 'rgba(0,0,0,0)',
    color: 'white'
  }
});

Ответ 2

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

Обратите внимание, что если вы установили backgroundColor вашего контейнера в transparent (или rgba(0,0,0,0)), вы также получите прозрачный текстовый блок - это знание поможет вам обойти эту проблему. Однако я думаю, что это можно интерпретировать как ошибку, так как это не то поведение, которое можно было бы ожидать, это похоже на какую-то проблему стекирования.

Ответ 3

backgroundColor: 'transparent' На самом деле это оптимизация производительности, и она довольно агрессивна.

"<Text> наследуют цвет фона их родительского <View> , но это поведение вызывает больше раздражения, что помогает, на мой взгляд. Простым примером является < Изображение > с вложенным <Text> . Вместо этого узлы получат фоновый цвет или родительские представления и скроют изображение. Затем мы должны установить backgroundColor: 'transparent' на текстовые узлы, чтобы исправить его.

Такое поведение также не происходит на Android, Текст > узлы всегда имеют прозрачный фон по умолчанию. Это вызывает несколько неожиданностей при разработке чего-то на Android, а затем тестирование его на iOS. " https://github.com/janicduplessis

Это обсуждение, когда пользователи подняли его как проблему. Подробнее читайте здесь - https://github.com/facebook/react-native/issues/7964

Самый простой способ, как сказал Колин, - установить backgroundColor контейнера на rgba (0,0,0,0)

Ответ 4

Я столкнулся с одной и той же проблемой. Попробуйте удалить backgroundColor: '#000000', из ваших стилей контейнера. Не уверен, почему, но фоновый цвет компонента верхнего уровня, по-видимому, используется в этом случае.