React Native Image

Posted 2020-06-14

 

　　静态图片资源

　　当React Native0.14版本发布的时候，它为ios和android应用提供了一个统一的管理图片的方法。增加静态图片到你的app, 然后到你的源码树中引用它，如：

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

　　图片的名称问题的解决方法跟JS模块的解决方法一致。 在上面的例子中，packager将会请求它的组件的相同目录中寻找my-icon.png。如果你同时有my-icon.ios.png和my-icon.android.png, packager将会视你所运行的平台来决定获取哪一张图片。

　　你也能使用@2x, @3x等。 它们为不同的屏幕分辨率提供图片。 例如你有下面的文件结构：

1 .
2 ├── button.js
3 └── img
4     ├── [email protected]
5     └── [email protected]

　button.js代码包含下面：

1 <Image source={require(‘./img/check.png‘)} />

　　Packager将会自动根据屏幕分辨率匹配，例如，在iPhone 5s就会选择[email protected], 在Nexus 5会选[email protected]。如果没有图片匹配这屏幕分辨率，就会选择最接近最好的。

 

　　一些益处：

1. iOS 和 Android用相同的程序系统。
2. 图片和你的JS代码在同一目录，组件是自包含的。
3. 没有全局的命名空间，你不用担心名字冲突。
4. 只有真正使用的图片才会打包进你的app。
5. 添加或改变图片不需要app重新编译，只用在模拟器中正常操作就行。
6. packager知道图片的尺寸，不需要重复的代码写。
7. 图片能够通过npm 包分发。

　　注意： 为了能够正常工作，在require中的图片名称必须是静态的

 1 // GOOD
 2 <Image source={require(‘./my-icon.png‘)} />
 3 
 4 // BAD
 5 var icon = this.props.active ? ‘my-icon-active‘ : ‘my-icon-inactive‘;
 6 <Image source={require(‘./‘ + icon + ‘.png‘)} />
 7 
 8 // GOOD
 9 var icon = this.props.active ? require(‘./my-icon-active.png‘) : require(‘./my-icon-inactive.png‘);
10 <Image source={icon} />