Image 用来当做背景图片

2017-11-11  本文已影响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
    }
})



上一篇 下一篇

猜你喜欢

热点阅读