react-native设计之使用图片
作者:互联网
文档:https://reactnative.cn/docs/images
1.静态图片
React Native 提供了一个统一的方式来管理 iOS 和 Android 应用中的图片。要往 App 中添加一个静态图片,只需把图片文件放在代码文件夹中某处,然后像下面这样去引用它:
<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
并且button.js
里有这样的代码:
<Image source={require('./img/check.png')
标签:3x,2x,react,native,图片,check,png,icon 来源: https://blog.csdn.net/qq_27868061/article/details/115435160