react-native APP Image加载图片

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进行加载，当然你还需要加入对应的权限。这样图片就能正确加载了。