react-native APP Image加载图片

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/qq_36091581/article/details/78407992

react-native APP Image加载图片
*react-native APP Image加载图片共有3中方法：
1.加载外部资源的图片（网络图片）

 <Image style={{width:100,height:100}} source={{uri:'https://facebook.github.io/react/img/logo_og.png'}} />

2. 加载本项目图片
2.1 android
在android/app/src/main/res/drawable目录中加入你需要的图片。

<Image style={{width:100,height:100}} source={{uri:'icon'}} />

记住uri对应的图片名称是不包含后缀的。需要重新打包APP,这样图片能够被正确加载并且显示出来。
2.2 ios
——————自己百度，啦啦啦—————————————————
2.3 android和ios均适用

在源文件的根目录新建文件夹app，具体看上图。
images.js中写法

在pages中的引用：

import LocalImg from '../images'

<Image style={styles.logoimg} 
  source={LocalImg['logo']}
/>

完成了。
3.加载SD卡内的图片
如果要加载手机存储卡上的图片资源，其方式也很简单，假设我现在要加载sdcard根目录下的icon.png。对应的代码如下：

 <Image style={{width:100,height:100}} source={{uri:'file:///sdcard/icon.png'}} />

可以看到使用了file://加上文件的路径/sdcard/icon.png进行加载，当然你还需要加入对应的权限。这样图片就能正确加载了。