文档：图片 · React Native 中文网

1.静态图片

React Native 提供统一的方式来管理应用中的图片。

<Image source={require('./my-icon.png')} />

require('image!xxx')的写法已经从 0.40 版本开始不再支持！

图片文件的查找会和 JS 模块的查找方式一样。

如果有my-icon.ios.png和my-icon.android.png，Packager 就会根据平台而选择不同的文件。

还可以使用@2x，@3x这样的文件名后缀，为不同的屏幕精度提供图片。

.
├── button.js
└── img├── check.png├── check@2x.png└── check@3x.png

Packager 会打包所有的图片并且依据屏幕精度提供对应的资源。

这样做有一些好处：

iOS 和 Android 一致的文件系统。
图片和 JS 代码处在相同的文件夹
不需要全局命名。
只有实际被 require 的图片才会被打包到 app。
开发期间，增加和修改图片不需要重新编译了，只要刷新模拟器就可以了。
Packager 可以得知图片大小了，不需要在代码里再声明一遍尺寸。
现在通过 npm 来分发组件或库可以包含图片了

react-native入门之使用图片相关推荐

React Native 入门实战视频教程（36 个视频）
React Native 入门实战视频教程(36 个视频) #1 React Native 课程介绍「02:14」 #2 搭建 React Native 开发与运行环境跑起来「05:07」 #3 演示 ...
React Native 入门实战视频教程（37 个视频）
我这里有视频教程,全部是我自己辛苦录的,有兴趣的可以看下. React Native 入门实战视频教程(37 个视频) 从零开始入门学习 React Native 开发,手把手教你写 App 项目 # ...
React Native 入门实战视频教程（4 个视频）
React Native 入门实战视频教程(4 个视频) #1 React Native 课程介绍「02:14」 #2 搭建 React Native 开发与运行环境跑起来「05:07」 #3 演示在 ...
React Native的照相机和图片
React Native的照相机和图片 react-native-image-picker 如果要实现多个图像选择,裁剪,压缩等功能需要 react-native-image-crop-picker ...
React Native入门（十四）之动画（1）Animated详解
前言在APP的开发中,流畅合理的动画能大大提高用户体验,Android和iOS原生都有对应的动画系统,同样的在RN中也有用于创建动画的API,就是Animated.Animated库使得开发者可以非 ...
React Native与原生的图片交互问题
项目中的一个需求:在原生系统中调用第三方SDK识别身份证后将获取的信息和图片返回到React Native JSX页面上展示. 首先React Native与原生通信的方式可以采用CallBack 和 ...
React Native - 使用CameraRoll将图片保存到本地相册
PS: 以下内容经过本人亲自尝试证明在IOS设备上简单有效 // IOS需要授权认证才允许保存图片,非常重要,记得配置: 由于苹果安全策略更新,还需要在 Info.plist 配置请求照片相的关描述 ...
React Native入门基础使用总结
1.router: react-native-router-flux 基于react-navigation/native 二次封装 2.字体图标:react-native-vector-icons(推 ...
React Native 入门踩坑
开发环境搭建及环境变量配置开发rn第一步需要配置安卓环境 android studio下载地址: https://developer.android.google.cn/studio/archive ...
给iOS开发者的React Native入门使用教程
目录一. 原生iOS项目集成React Native 二. 原生跳转RN页面三. 显示豆瓣热门电影列表四. 改为导航五.完整源代码一. 原生iOS项目集成React Native 创建一个新 ...

react-native入门之使用图片

1.静态图片

react-native入门之使用图片相关推荐

最新文章

热门文章