Oscurecer una imagen para superponer texto en React Native

Estoy intentando superponer un título sobre una imagen, con la imagen oscurecida con una opacidad menor. Sin embargo, el efecto de opacidad también está cambiando el texto superpuesto, haciéndolo más tenue. ¿Alguna solución a esto?


//component for article preview touchable image
/* will require the following
- rss feed and api
- user's keyword interests from parse In home.js
- parse db needs to be augmented to include what they heart
- parse db needs to be augmented to include what they press on (like google news)
var React = require('react-native');
var {
} = React;

var Dimensions = require('Dimensions');
var window = Dimensions.get('window');
var ImageButton = require('../../common/imageButton');
var KeywordBox = require('../../authentication/onboarding/keyword-box');

//additional libraries

module.exports = React.createClass({
  //onPress function that triggers when button pressed
  //this.props.text is property that can be dynamically filled within button 
  /* following props:
    - source={this.props.source}
    - onPress={this.props.onPress}
    - {this.props.text}
    - {this.props.heartText}
    - key={this.props.key} 
    - text={this.props.category} 
    - this.props.selected
  render: function() {
    return (
        onPress={this.props.onPress} >
            style={[styles.articlePreview, this.border('red')]}>
                  <View style={[styles.container, this.border('organge')]}>
                      <View style={[styles.header, this.border('blue')]}>
                          <Text style={[styles.previewText]}>{this.props.text}</Text>
                      <View style={[styles.footer, this.border('white')]}>
                        <View style={[styles.heartRow, this.border('black')]}>
                              style={[styles.heartBtn, , this.border('red')]}
                              source={require('../../img/heart_btn.png')} />
                          <Text style={[styles.heartText]}>{this.props.heartText + ' favorites'}</Text>
                              style={[styles.category, this.border('blue')]}
                              selected={this.props.selected} />
  onHeartPress: function() {
    //will move this function to a general module
  border: function(color) {
      return {
        //borderColor: color, 
        //borderWidth: 4,

var styles = StyleSheet.create({
  heartText: {
    color: 'white', 
    fontSize: 12, 
    fontWeight: 'bold',
    alignSelf: 'center', 
    marginLeft: 5, 
    fontFamily: 'SFCompactText-Medium'
  heartRow: {
    flexDirection: 'row', 
    justifyContent: 'space-around', 
    alignSelf: 'center', 
    justifyContent: 'center', 
  heartBtn: {
    height: (92/97)*(window.width/13), 
    width: window.width/13, 
  category: {
    fontFamily: 'Bebas Neue', 
    fontSize: 10,
    fontWeight: 'bold'
  header: {
    flex: 3, 
    alignItems: 'center', 
    justifyContent: 'space-around', 
    marginTop: window.height/30,
  footer: {
    flex: 1, 
    flexDirection: 'row', 
    justifyContent: 'space-between', 
    alignItems: 'center', 
    margin: window.height/50,
  container: {
    flex: 1, 
    backgroundColor: 'black', 
    opacity: 0.6, 
  articlePreview: {
    flex: 1, 
    height: window.height/3.2, 
    width: window.width, 
    flexDirection: 'column'
  previewText: {
    fontFamily: 'Bebas Neue', 
    fontSize: 23,
    color: 'white', 
    alignSelf: 'center', 
    textAlign: 'center', 
    margin: 5, 
    position: 'absolute',
    top: 0,
    right: 0,
    bottom: 0,
    left: 0



SOLUCION a Oscurecer una imagen para superponer texto en React Native


Intente cambiar el estilo del contenedor a

container: {
 flex: 1, 
 backgroundColor: 'rgba(0,0,0,.6)'


En lugar de aplicar la opacidad a todo el elemento ImageBackground, impleméntelo en la propia imagen Ej.

<ImageBackground style={styles.imageContainer}
                 imageStyle={{ opacity: 0.5 }}
                <View style={styles.welcomeContainer}>
                    <Image source={require('../assets/images/zeptagram-logo.png')} style={styles.welcomeImage} />

También te podría gustar...

Deja una respuesta

Tu dirección de correo electrónico no será publicada.