React-native图片组件以及无法显示图片问题总结

首先，总结一下React-native的Image组件的使用方法.

Image组件的引入图片提供了下面这几种类型：静态图片资源，网络图片资源

静态图片资源

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

网络图片资源

<Image
    style={styles.logo}
    source={{uri: 'http://facebook.github.io/react/img/logo_og.png'}}
/>

注意事项

上面说了那么多概念似的说明，但是，实践过程中总会有一些坎坷。下面就是一些注意事项了。

背景图片的实现

写过前端页面的朋友应该都知道html中不光可以使用image标签来展示图片，还有可以使用背景图片（background-image）的形式来展现。要实现这样的功能只需要新增一个Image组件，然后把需要背景图的子组件嵌入其中即可。

render (){
    return (
        <Image source={'./background.png'} style={{width:200,height:20}}>
            <Text>这个文本下面有背景哦</Text>
        </Image>
    )
}

图片不显示的几种可能性

1. 图片没有指定宽高

<Image source={require('./my-icon.png')} style={{width:20,height:20}}/>
const imageObj={
    width:20,
    height:20
}
<Image source={require('./my-icon.png')} style={imageObj}/>

2. 加载网络资源时，加载的图片不显示。

   Ios9以后默认只能https传输，所以我们需要调整工程目录下的projectName/Info.plist文件

   
   
   项目目录信息

   添加Allow Arbitrary Loads的key值，value为 YES

   
   
   需要修改的字段
   
   

   完工。

3. 使用require使用静态图片资源报错

   因为懒，使用了微信截图的默认名称WX20180523-232003@2x.png结果报错了，说图片找不到

WX20180617-144007@2x.png

修改图片名称以后，就可以显示正常。

4. 没有使用支持的图片格式

• React Native 默认支持 JPG、PNG 格式。
• 在 iOS 平台下，还支持 GIF、WebP 格式。
• 在 Android 平台下，默认不支持 GIF、WebP 格式。可以通过修改 Android 工程设置让其支持这两种格式：打开项目目录下的android/app/build.gradle，视情况添加相关代码：

dependencies {
  compile 'com.facebook.fresco:animated-gif:0.11.0'  //需要GIF动画支持添加本行语句
  compile 'com.facebook.fresco:webpsupport:0.11.0'  //需要WebP格式支持添加本行语句
  compile 'com.facebook.fresco:animated-webp:0.11.0'  //需要WebP动画支持添加本行语句
}

(本条转自React Native - Image组件的使用详解（加载资源、网络、本地图片）)