015_ReactNative: Images

(问渠那得清如许，为有源头活水来。 双手奉上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中嵌套子元素来使其作为背景图片使用