ReactNative入门之Image组件透析

上一篇博客介绍了state与props的使用，接下来我会依次介绍常用的组件，以及使用的时候要注意的事项，那么下面就从Image组件开始吧。
Image是RN中展示图片的组件，使用起来也非常简单，有过前端开发经验的人对于img标签不陌生，而Image的使用和img标签极其相似。

export default class Entrance extends Component {

    constructor(props) {
      super(props);
    }
    render() {  
        return (
          <Image source={require('./img/tupian.jpg')}></Image>               
        );
    }
}

运行效果如下：

这里写图片描述

这段代码很简单，我们在入口类中加入了一个Image标签，并且指定了source，source中加载的是js同级文件下的img文件夹中的tupian.jpg这张图片。图片是显示了，但是显然并不是我们想要的，因为一张图篇就填充了整个屏幕了，其他控件无法在显示了，所以在使用Image组件的时候第一个要注意的地方就是。为图片设置大小 稍微对代码做些调整。

<View style ={{flex:1,justifyContent:'center',alignItems:'center',}}>
<Image source={require('./img/tupian.jpg')} style={{width:100,height:100,}}></Image>               
</View>

在图片的最外层我嵌套一个view,设置view全部填充手机屏幕，然后内容居中，图片大小我都设置为了100，现在看显示结果是不是大小适中了。：

这里写图片描述

在指定图片资源的时候，我是直接指定的静态资源，而并不是运行时编译后拼接的图片地址，拼接的地址图片是不会显示的。

这里写图片描述

这是为什么？是因为在我们将js文件打包为bundle的时候，RN会将这些静态的图片资源也一起打进我们的项目中，android会添加到drawble文件夹下。没有呗静态资源引用的图片，RN不会打入项目中。但是在项目中，有时候会根据后台返回的值，去加载本地的图片资源，这个时候又不能拼接字符串，该怎样加载正确的图片呢？解决办法就是我们自己建一个js图片资源的文件，根据后台返回的值去加载响应的文件资源。这样说不太直观，下面我贴一个js文件。

var icon_array= {"sfdulisheshi":require('../img/daolantushi2.png'),
...
...
...
"zawu":require('../img/wuzhangaisheshi2.png'),
"zhishibiaoshi":require('../img/wuzhangaisheshi2.png'),};
 export default class SheShi {
    getIcon(code){
       return icon_array[code];
    }
}

通过加载js文件，就可以找到对饮的图片资源了。
Image能加载本地图片，当然加载网络资源图片也是可以的，我们在稍微修改一下代码：

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

只需要给source传一个对象即可，这个对象key为uri（资源定位符），然后value传对应的地址，这样在加载Image的时候，就回去请求网络图片了。运行结果：

这里写图片描述

在这里也会经常遇到一个问题，就是当图片加载失败的时候，图片就无法显示了，通常在开发中如果图片请求失败，那么应该有一个默认值图片才对，那么RN如何为设置请求失败的默认图片呢？我这里说一种解决办法，不是最好的。要是有更好的解决办法，欢迎交流一下。Image组件是可以当作背景图片来使用的，所以在我们可以在外层再嵌套一个大小一样的Image，这样，当请求不到的时候，就显示了最外层的图片了，对于用户来说，也没有什么影响。那么修改代码：

<View style = {{flex:1,justifyContent: 'center',alignItems: 'center',}}>
             <Image source={require('./img/tupian.jpg')} style={{width:100,height:100,}}>
              <Image source={{uri:'https:'}} style={{width:100,height:100,}}></Image>               
             </Image>      
          </View>

图片请求的uri我们随便写了个“https”,这样肯定是无法请求到图片的，外层我有嵌套了一个加载本地图片的Image，当图片请求不到的时候，本地图片就会显示了，这样就完成了我们的需求了。
在项目中有的时候会用到圆角图片，Image组件可以通过将borderRadius设置为宽高的50%即可，这也是css中常用的方式
修改代码：

 <View style = {{flex:1,justifyContent: 'center',alignItems: 'center',}}>
             <Image source={require('./img/tupian.jpg')} style={{width:100,height:100,}}>
              <Image source={{uri:'https://facebook.github.io/react/img/logo_og.png'}} style={{width:100,height:100,borderRadius:50,}}></Image>               
             </Image>      
          </View>

运行结果：

这里写图片描述

这样图片圆角也就完成了，最后说一点，Image引用android项目中drawble中的图片：

{uri:('icon_name')},

这样就可以了，不要在文件后缀名。ios加后缀名是可以显示的，android添加之后就啥也不显示了。

ReactNative入门之Image组件透析

猜你喜欢