效果图如下
import React, { Component } from 'react';
import {
Text,Image,StyleSheet,View
} from 'react-native';
/*获得屏幕的宽和高需要导入的Dimensions包*/
var Dimensions = require('Dimensions');
export default class HelloWorldApp extends Component {
render() {
let pic = {
uri: 'https://upload.wikimedia.org/wikipedia/commons/d/de/Bananavarieties.jpg'
};
return (
<View style={styles.container}>
<Image source={pic} style={styles.picStyle}/>
<Text style={styles.helloTextStyle}>Hello</Text>
</View>
);
}
}
/*获得屏幕宽度*/
let Screen_width = Dimensions.get('window').width;
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
picStyle: {
width:Screen_width,
height:3*Screen_width/4.0,
},
helloTextStyle: {
fontSize: 20,
textAlign: 'center',
margin: 10,
},
});
