React Native 之 图片使用
import React from 'react';
import { View, Image, StyleSheet } from 'react-native';
export default class App extends React.Component {
render() {
let pic = {
uri: 'https://reactnative.dev/img/tiny_logo.png'
};
return (
<View style={styles.container}>
<Image source={pic} style={styles.image} />
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
image: {
width: 120,
height: 120,
},
});
这段代码展示了如何在React Native应用中加载和显示一个远程图片。它使用了Image
组件,其source
属性接收一个包含uri
属性的对象,该对象指定了图片的网络地址。同时,它使用了StyleSheet
来指定图片组件的样式,包括宽度和高度。
评论已关闭