/**
* 设置背景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
}
})
网友评论