Nakładanie tekstu Obraz z zaciemnionym opacity React Native

Question

Próbuję nakładać tytuł na obraz - z przyciemnionym obrazem o niższym stopniu krycia. Jednak efekt krycia zmienia również nakładany tekst - co powoduje, że jest przyciemniony. Jakieś poprawki do tego? Oto, co to wygląda:

I tu jest mój kod dla komponentu niestandardowego (podgląd artykuł - który powyższy obraz jest rząd elementów podglądu artykuł):

//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 
    }, 

}); 

Answer 1

Try zmiana stylu kontenera na

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

Answer 2

Krycie będzie mieć wpływ na cały widok. Spróbuj zamiast tego mieć 2 widoki. Jeden, który jest absolutnie pozycjonowany z zawartym obrazem. Kolejny z Twoim tekstem i zawartością przycisku.

Możesz absolutnie umieścić widok użyciu pozycji: „absolutne” top: 0, w lewo: 0

Answer 3

rozwiązać moją pracę z tła wewnątrz znacznika obrazu i działa dobrze. podoba się to

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