文档：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')