Estoy tratando de procesar un bloque de texto en blanco en la parte superior de una imagen en mi prueba de Reaccionar Nativo. Pero en su lugar, obtener un bloque negro en la parte superior de mi imagen con texto en blanco en él. No es lo que yo había esperado. ¿Cómo se puede representar un bloque de texto con fondo transparente?

Resultado actual

Render cuadro de texto con fondo transparente en la parte superior de la imagen en Reaccionar Nativas de iOS

Representar la función

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>
  );
)

Hoja de estilos en función de

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'
  }
});
  • Cuidado, esto está ahora en desuso : «el Uso de <Imagen> con los niños es obsoleto y será un error en el futuro cercano. Por favor reconsiderar el diseño o el uso de <ImageBackground> en su lugar. «

4 Comentarios

  1. 53

    Por FAVOR NOTA: Esta respuesta es ahora mucho fuera de fecha. Esto era aplicable el día de Reaccionar Nativa era de código abierto de nuevo en 2015. Hoy en día esta forma de hacer esto es obsoleto.




    Usted puede lograr esto mediante la adición de un View dentro de la Image así:

    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>
      );
    )

    Hoja de estilos en función de

    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'
      }
    });
    • los estilos.la bienvenida no está definido.
    • Error tipográfico, sustituye la bienvenida con título, que fue definido.
    • Trabajo agradable. Muchas gracias
    • el uso de <Imagen> con los niños es ahora en desuso para su INFORMACIÓN…
    • Sí @blacksun, pero usted puede utilizar ImageBackground, que ya he usado y funciona bien
    • Tratando de esto resultó en un error: El <Image> componente no puede contener a los niños.

  2. 8

    backgroundColor: ‘transparente’
    Esto en realidad es una optimización del rendimiento y es bastante agresivo.

    «< Texto > elementos heredan el color de fondo de sus padres < Ver > pero este comportamiento causa más molestia que ayuda en mi opinión. Un ejemplo sencillo es un < Imagen > con anidada < Texto >. Los nodos de texto tendrá el color de fondo o el padre vistas lugar y ocultar la imagen. Entonces tenemos que establecer backgroundColor: ‘transparente’ en los nodos de texto para solucionarlo.

    Este comportamiento no ocurre en Android, el < Texto > nodos siempre tienen un fondo transparente por defecto. Esto hace un par de sorpresas a la hora de desarrollar algo en Android, a continuación, las pruebas en iOS.» – https://github.com/janicduplessis

    Esto es a partir de un debate en el que los usuarios planteado como un problema. Lea más aquí – https://github.com/facebook/react-native/issues/7964

    La manera más fácil como Colin dicho anteriormente es para establecer el backgroundColor de que el contenedor de rgba(0,0,0,0)

  3. 7

    Internamente, veo que Reaccionan Nativo de no traducir los valores alfa y el caso especial de transparent en la correcta UIColor con valores alfa, así que ese aspecto de esto es trabajo y es fácil de validar experimentalmente.

    Aviso de que si se establece la backgroundColor de su contenedor para transparent (o rgba(0,0,0,0)), también puede obtener una transparente bloque de texto – que el conocimiento debe ayudar a evitar este problema. Sin embargo creo que es posible interpretar esto como un error ya que no es el comportamiento que uno esperaría, se siente como una especie de apilamiento problema.

  4. 2

    Me encontré con el mismo problema. Pruebe a quitar backgroundColor: '#000000', de su contenedor de estilos. No sé por qué, pero el color de fondo del componente de nivel superior parece ser utilizado en este caso.

Dejar respuesta

Please enter your comment!
Please enter your name here