超级会员免费看
本文介绍了React Native中处理图片的各种方法，包括静态图片、非图片资源、混合App的图片资源、网络图片的加载和缓存控制。强调了指定图片尺寸以优化用户体验，以及iOS的特定注意事项，如边框圆角不支持和图片解码在后台线程进行。
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
├── [email protected]
└── [email protected]Packager 会打包所有的图片并且依据屏幕精度提供对应的资源。
这样做有一些好处：
- iOS 和 Android 一致的文件系统。
- 图片和 JS 代码处在相同的文件夹
- 不需要全局命名。
- 只有实际被 require 的图片才会被打
订阅专栏 解锁全文
扫一扫
1469
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
