美文网首页
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 用来当做背景图片

  • 1.CSS background属性与background-im

    在书写css样式时,background属性与background-image经常用来设置背景图片,容易搞混。 b...

  • 背景

    background-color&background-image 背景颜色&背景图片 背景图片默认平铺显示,背景...

  • 设置背景图片及相关属性

    设置背景图片: 在CSS可以通过background-image: url();设置背景图片 控制背景图片的平铺方...

  • CSS学习笔记(五)

    背景图片 1、backgroud-image:url()属性专门设置背景图片 2、backgroud-repeat...

  • 小程序学习总结(踩坑记录)

    1、背景图片全屏显示 描述:首先在小程序中显示背景图片的话不能使用 image ,image 只能用在显示在最上层...

  • 背景,雪碧图

    使用background-image来设置背景图片 语法:background-image:url(相对路径); ...

  • 背景

    背景设置: 使用background-image来设置背景图片语法:background-image:url(相对...

  • CSS3 新增属性:背景

    background-image CSS3 中可以通过 background-image 属性添加背景图片。 语法...

  • 17-CSS 背景(background)

    一、 背景颜色 (color) 语法: 二、 背景图片 (image) 语法: 小技巧: 我们提倡 背景图片后面的...

网友评论

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

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