2016-01-01 33 views
8

Sto tentando di sovrapporre un titolo a un'immagine, con l'immagine scurita con un'opacità inferiore. Tuttavia, l'effetto di opacità sta cambiando anche il testo di sovrapposizione - rendendolo oscuro. Qualche correzione per questo? Ecco ciò che è appare come:Immagine di sovrapposizione di testo con opacità scura React Native

enter image description here

E qui è il mio codice per il componente personalizzato (articolo anteprima - che l'immagine qui sopra è una fila di componenti articolo di anteprima):

//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 { 
    View, 
    StyleSheet, 
    Text, 
    Image, 
    TouchableHighlight, 
} = React; 

//dimensions 
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 (
     <TouchableHighlight 
     underlayColor={'transparent'} 
     onPress={this.props.onPress} > 
      <Image 
      source={this.props.source} 
      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> 
         <View style={[styles.footer, this.border('white')]}> 
         <View style={[styles.heartRow, this.border('black')]}> 
          <ImageButton 
           style={[styles.heartBtn, , this.border('red')]} 
           resizeMode={'contain'} 
           onPress={this.onHeartPress} 
           source={require('../../img/heart_btn.png')} /> 
          <Text style={[styles.heartText]}>{this.props.heartText + ' favorites'}</Text> 
         </View> 
          <KeywordBox 
           style={[styles.category, this.border('blue')]} 
           key={this.props.key} 
           text={this.props.category} 
           onPress={this.props.categoryPress} 
           selected={this.props.selected} /> 
         </View> 
        </View> 
      </Image> 
     </TouchableHighlight> 
    ); 
    }, 
    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, 
    alignSelf:'center', 
    }, 
    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 
    }, 

}); 

risposta

13

Try modifica dello stile del contenitore in

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

Questo fa il trucco. E se 'rgba()' non funziona, si dovrebbe aggiornare React Native a 0.16 o superiore. – zvona

+0

lavoro anche per me, RN 0,52 (Oggi è il 2018 22 gennaio) – NamNamNam

2

L'opacità influisce sull'intera vista. Prova ad avere 2 visualizzazioni. Uno che è assolutamente posizionato con l'immagine contenuta. Un altro con il tuo testo e il contenuto del pulsante.

È assolutamente possibile posizionare una vista utilizzando posizione: "assoluto", in alto: 0, a sinistra: 0

+0

Lo guarderò oggi - sembra che ho appena cambiato l'interfaccia utente per evitare del tutto il problema e ho preso una notizia UX route –

+0

Hai avuto fortuna? –

+0

quello che ho finito è stato cambiare completamente la vista per assomigliare a Google News invece –

1

posso risolvere il mio lavoro con priorità bassa all'interno del tag immagine e funziona benissimo. come questo

<Image source={require('./img/2.jpg')} style= 
       {{height:deviceRowHeight,width:deviceWidth}}> 
    <View style={{backgroundColor:'rgba(0,0,0,.6)', 
       height:deviceRowHeight,width:deviceWidth}}> 
     <Text> Test Text </Text> 
    </View> 
</Image> 
+0

Che backgroundColor rgba per il contenuto risolve tutto. ... –

Problemi correlati