美文网首页
Image 用来当做背景图片

Image 用来当做背景图片

作者: 基本密码宋 | 来源:发表于2017-11-11 23:05 被阅读184次
    /**
     *  设置背景imageBackground
     */
    
    import React, { Component } from 'react';
    import {
        Platform,
        StyleSheet,
        Text,
        View,
        Image
    } from 'react-native';
    
    
    
    export default class NewApp extends Component<{}> {
        render() {
            return (
                    <View style={styles.container}>
                        <Image style={styles.imageBackGround}
                               source={{uri:'http://img05.tooopen.com/images/20140326/sy_57640132134.jpg'}}>
    
                              <View style={styles.overlay}>
                                  <Text style={styles.overlayHeader}>
                                      标题
                                  </Text>
                                  <Text style={styles.overlaySubHeader}>
                                      标题下面的文字(背景图片)
                                  </Text>
                              </View>
                        </Image>
                    </View>
            );
        }
    }
    
    
    const styles=StyleSheet.create({
        imageBackGround:{
            resizeMode:'stretch',
            flex:1
        },
        container:{
            flex:1,
        },
        overlay:{
            backgroundColor:'rgba(0,0,0,0.5)',/*背景是透明的  0.3 */
            alignItems:'center'
        },
        overlayHeader:{
            fontSize:30,
            fontFamily:'Helvetica Neue',
            fontWeight:'200',
            color:'#eae7ff',
            padding:10
        },
        overlaySubHeader:{
            fontSize:15,
            fontFamily:'Helvetica Neue',
            fontWeight:'200',
            color:'#eae7ff',
            padding:10,
            paddingTop:0
        }
    })
    
    
    
    

    相关文章

      网友评论

          本文标题:Image 用来当做背景图片

          本文链接:https://www.haomeiwen.com/subject/cdggmxtx.html