(
问渠那得清如许，为有源头活水来。双手奉上RN官网)
Images 图片
- 静态图片: 可以使用如
<Image source={require('./myIcon.png')} />的方式获取- 加载图片的路径相对与代码所在的文件
- 如果你提供了myIcon.ios.png,myIcon.android.png.系统会自动根据平台来获取相应的图片.
- 如果提供了myIcon@2x.png,myIcon@3x.png. 系统会根据屏幕分辨率自动获取适当的图片,如果没有则用相对最适合的图片.
- 只有真正使用到的图片才会被打包进去.
- require里图片的路径应该是静态的路径,而不是运行时拼凑,尽管拼凑也可用
- 图片信息中包含了图片的尺寸,如果想动态缩放,需要手动在style中声明
{ width: undefined, height: undefined }
-
在混合开发时获取原生项目中的图片:可以使用
<Image source={{uri: 'app_icon'}} style={{width: 40, height: 40}} />- 你需要保证图片确实可用且声明其尺寸
-
网络图片:可以使用
<Image source={{uri: 'https://facebook.github.io/react/img/logo_og.png'}} style={{width: 400, height: 400}} />获取- 必须声明图片的尺寸,意在更好的用户体验
- 应用本地文件系统(相册等)中的图片
- RN会自动选择合适分辨率的图片
- 可以通过在Image中嵌套子元素来使其作为背景图片使用
