显示多种不同类型图片的 React 组件,包括网络图片、静态资源、临时的本地图片、以及本地磁盘上的图片(如相册)等。
import { View, Text, StatusBar, Image, StyleSheet, Dimensions, } from 'react-native'; import {useEffect, useState} from 'react'; import Logo from '../../assets/images/logo.png'; import Ionicons from 'react-native-vector-icons/Ionicons'; function HomeScreen() { const width = Dimensions.get('window').width; return ( { flex: 1, justifyContent: 'flex-start', alignItems: 'center', width: '100%', backgroundColor: '#F5FCFF', }}> 引入本地的图片: styles.logo} source={Logo} /> 引入网络的图片: styles.pic} source={{ uri: 'https://img-s-msn-com.akamaized.net/tenant/amp/entityid/BB1r4cgD.img?w=640&h=390&m=6', }} /> 字体图标: 'desktop'} size={36} /> ); } const styles = StyleSheet.create({ logo: { width: 100, height: 100, }, pic: { width: 360, height: 240, }, }); export default HomeScreen;
这样我们就学习完了Image组件。其他的属性可以参考api去尝试。