react-native从入门到实战系列教程一Image的运用
创始人
2024-11-15 15:11:31
0

显示多种不同类型图片的 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去尝试。

相关内容

热门资讯

至尊雄心:成为不甘平庸的男人,... 至尊雄心:成为不甘平庸的男人,掌握顶级赢家思维嘿,伙计们&...
C语言:扫雷游戏实现 一、扫雷游戏的分析和设计扫雷游戏想必大家都玩过吧,初级的玩法是在一个9*9的棋盘上找到...
2024人大金仓数据库内核开发... 随着信息技术的飞速发展,数据已成为企业和社会发展的重要资源。作为数据库领域国家队&#x...
食源送系统项目的测试 一、对整个系统编写测试用例        功能测试                       性能...
数据同步策略概览 数据同步在业务开发中比较普遍,例如 订阅MySQL的binlog将数据同步至异构数据库...
windows 使用 ffmp... 参考博客: 1. 【ffmpeg入门】安装CUDA并使用gpu加速࿱...
算法竞赛数据生成及使用Subl... 写在前面:最近几天看蒋老师直接使用了Sublime中的FastOlympicCode插...
进程状态(一)---- 运行,... 目录前言1. 运行状态2. 阻塞状态3. 挂起状态前言接着上一篇文章 进程概念(三&#...
培训第十七天(nginx反向代... 上午反向代理安装nginx 1.26.1 平滑升级 负载均衡1、nginx 反向代理配置反向代理&#...
️ LangChain +St... 引言:种下一棵树最好的时间是十年前,其次是现在书接上回:将对话式人工智能...