React Native05 - 组件Image和九宫格效果

2017-04-05 本文已影响768人涅磐广广

前言

之前有人问我学习一门技术，怎么样才能最快速的掌握一门技术，我的回答是写博客或者给别人讲解。

这两种方式有一个共性，那就是都需要专研。我们自己去学习的时候，容易有一种得过且过的心理，比如：“算了，不研究了，我知道怎么写就行”。但当你写博客或者讲解的时候，就不能有这样的心态了，你得专研他到底是什么原理，这样你在写博客或者给别人讲解的过程中，你才会更加自信。同时你自己也再一步一步的提升。

废话不多说了，本篇内容如下：

组件Image
九宫格案例来复习之前学习的知识

一、组件Image

在开发中有一个非常重要的组件Image，通过这个组件可以展示各种各样的图片，而且在React Native中该组件可以通过多种方式加载图片资源
从当前RN项目中加载图片
```
<Image source={require("./img/2.png")} />
```
- RN中引入其他文件中的内容基本都是使用require引用，图片也不例外
- require后面的路径跟img中src中的路径基本相似，但有两个比较重要的点
  - 同级目录的话require的做法是在路径前面加【./】来标识，如下图的的引入方式为
  11.png
```
  <Image source={require("./img/2.png")} />
```
  - 在html中img中src的路径是可以拼接的，但rn中使用require引入图片的话路径目前是不可拼接的。比如如下的两种写法就会报错
```
var imgSrc = "./img/2.png";
 //错误示范1
<Image source={require(imgSrc )}>
//错误示范2
var imgName = "2.png";
<Image source={require("./img/"+imgName)}>
```
- React Native的Packager会根据平台选择相应的文件，例如：my_icon.ios.png和my_icon.android.png两个文件，加载时会根据平台选择相应的文件

从Android或iOS项目中加载图片
```
<View>
   <Image source={{uri:"1.jpg"}) style={{width:50,height:50}}}
</View>
```
- 必须将图片放到iOS项目中的asset文件夹或者Android drawable文件夹(如果不知道这两个文件，自行百度)，当项目在iOS端运行时会自动加载asset中的图片，在android端运行时会自动加载drawable中的图片
加载来自网络的图片

跟加载iOS项目和android项目中图片的方式一样，只不过，加载网络中的图片时，需要指定一下图片的尺寸
```
<Image source={{uri:'https://www.baidu.com/img/bd_logo1.png'}} style={{width:200, height:100}}/>
```
注意

当你在android和iOS项目中增加图片后，仅仅reload, 图片是无法显示的，你必须要重新安装这个软件

Image组件常用属性
- onLayout(function)
  
  当Image布局发生改变时，会调用该方法
- onload(function)
  
  当图片加载成功之后，回调该方法
onloadEnd(function)

当图片加载完成回调该方法，不会管图片加载成功还是失败
onloadStart(function)

当图片开始加载时调用该方法

resizeMode

Image.resizeMode.cover：   图片居中显示，没有被拉伸，超出部分被截断；
Image.resizeMode.contain： 容器完全容纳图片，图片等比例进拉伸；
Image.resizeMode.stretch： 图片被拉伸适应容器大小，有可能会发生变形

source

进行标记图片的引用，该参数可以作为一个网络url地址或者一个本地的路径

二、九宫格案例

这个案例基本将我们之前学习的内容都给复习了。如果能独立敲出来，你就可以信心饱满的进行下一步的学习，如果不能独立敲出来，建议你多看着敲几遍，把RN的编程方式熟烂于心，再进行下一步的学习，开始之前先看一下我们要做的效果

九宫格效果图

准备工作

将source文件夹中的BadgeData.json文件放到跟index.android.js同级的目录里
将source中的图片放到android的drawable文件夹和iOS的asset文件夹, 点击创建drawable文件夹,iOS的自行百度
在index.android.js的同级目录下新建一个js文件，统一取名为index.main.js

编码思路
1. 看图我们可以大概得出这个项目的UI结构如下
  
  最底下的白色背景是一个全屏的View,每个灰色的色块是一个小View,小View里面又包含了一个Image和Text.
2. 界面出来以后，我们在大概的看一下json数据结构，不懂json自行百度，UI和数据都有了，接下来我们开始编码
  json结构

具体代码

index.main.js

  import React, { Component } from 'react';
  import {
      AppRegistry, 
      StyleSheet,  
      Text,        
      View,         
      Image
  } from 'react-native';

  /*设置一些全局变量*/

  //获取设备的宽
  var dimensions = require("Dimensions");
  var width = dimensions.get("window").width;

  //设置每行3列
  var cols = 3;

  //每个小View的宽
  var boxW = 100;

  //计算每个View的间距
  var vMargin = (width-cols*boxW)/(cols+1);

  /*引入json数据

     A: 这里将json文件给引入了，我怎么去看变量badgeData里面的内容到底是什么呢？

     Q:   1. 直接console.log()
          2. andorid手机摇一摇手机，点击Debug JS Remotely,此时会在PC端自动给给打开一个网站(http://localhost:8081/debugger-ui),点开控制台即可看到你输出的内容，在这里会将json文件的内容转化成对象输出到控制台

  */
   var badgeDate = require("./BadgeData.json");
   console.log(badgeDate); 

  var MyRn = React.createClass({

        render() {

             return (

                  //这个View是全屏的View，具体样式看container
                  <View style={styles.container}>

                       /*函数renderAllBadge返回一个数组，该数组里放着每一个小View

                        * 提醒：
                        * 
                        *  1. 目前我们是在组件对象MyRn中的render()函数里，renderAllBadge是组件对象MyRn里面的一个函数
                        *
                        *  2. this指代的就是当前组件对象，这里跟js里面函数的用法一致
                        *
                        */
                       {this.rederAllBadge()}
                  </View>

             );
       },

      rederAllBadge(){

         //这个数组里存放我们准备好的每个小View,最终要作为这个函数的返回值返回
       var allData = [];

         //通过for循环来取出来每个小View的数据
       for(var i=0;i<badgeDate.data.length;i++){

          var badge = badgeDate.data[i];

                  //每次循环以后，将准备好的View放到数组allData中
               allData.push(
                      //通过key来标识每一个小View
                      <View key={i} style={styles.outViewStyle}>            
                          <Image source={{uri:badge.icon}}  style={styles.imageStyle}/>
                          <Text style={styles.textStyle}>{badge.title}</Text>
                      </View>       
               );       
            }

             //将allData作为返回值返回
           return allData;

         }
    })

  const styles = StyleSheet.create({

      container: {

          flex: 1,
          backgroundColor: 'white',

          flexDirection:"row",
          flexWrap:"wrap",
       },

      outViewStyle:{

          backgroundColor:"gray",

          alignItems:"center",

          width:boxW,
          height:boxW,
          marginLeft:vMargin,
          marginTop:vMargin

      },

      imageStyle:{

      width:80,
      height:80
      },

      textStyle:{
      fontSize:15
      }  
  });

  //导出自定义的组件
  module.exports = MyRn;

 index.android.js

  import {
      AppRegistry, 

  } from 'react-native';

  //导入其他文件中的组件
  var MyView =  require("./index.main.js");

  AppRegistry.registerComponent('myRn', () => MyView);

注意
1. 这个案例用到的知识点都是咱们之前学习过的，通过这个案例我告知大家一些编程小技巧，现在要慢慢熟悉这种，以后我们的案例都会是这种风格
2. 大家没见过的我都加注释的，哪里有什么迷惑的，可以直接评论留言。

React Native05 - 组件Image和九宫格效果

前言

一、组件Image

从当前RN项目中加载图片

从Android或iOS项目中加载图片

加载来自网络的图片

注意

Image组件常用属性

二、九宫格案例

准备工作

编码思路

注意

猜你喜欢

热点阅读