组件Image和九宫格效果

2022-03-09 19:39:35 浏览数 (1)

一、组件Image

  • 在开发中有一个非常重要的组件Image，通过这个组件可以展示各种各样的图片，而且在React Native中该组件可以通过多种方式加载图片资源
  • 从当前RN项目中加载图片 <Image source={require("./img/2.png")} />
    • RN中引入其他文件中的内容基本都是使用require引用，图片也不例外
    • require后面的路径跟img中src中的路径基本相似，但有两个比较重要的点
      • 同级目录的话require的做法是在路径前面加【./】来标识，如下图的的引入方式为

  • 从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的编程方式熟烂于心，再进行下一步的学习，开始之前先看一下我们要做的效果

九宫格效果图

  • 准备工作
  1. 将source文件夹中的BadgeData.json文件放到跟index.android.js同级的目录里
  2. 将source中的图片放到android的drawable文件夹和iOS的asset文件夹, 点击创建drawable文件夹,iOS的自行百度
  3. 在index.android.js的同级目录下新建一个js文件，统一取名为index.main.js
  • 编码思路
    1. 看图我们可以大概得出这个项目的UI结构如下 最底下的白色背景是一个全屏的View,每个灰色的色块是一个小View,小View里面又包含了一个Image和Text.
    2. 界面出来以后，我们在大概的看一下json数据结构，不懂json自行百度，UI和数据都有了，接下来我们开始编码

  1. 具体代码

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);

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

* 提醒：

* 1. 目前我们是在组件对象MyRn中的render()函数里，renderAllBadge是组件对象MyRn里面的一个函数

* 2. this指代的就是当前组件对象，这里跟js里面函数的用法一致 */

var MyRn = React.createClass({

render() {

return (

//这个View是全屏的View，具体样式看container

<View style={styles.container}>{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 },

});

import { AppRegistry } from "react-native";

//导出自定义的组件

module.exports = MyRn;

index.android.js;

//导入其他文件中的组件

var MyView = require("./index.main.js");

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

reactnative

0 人点赞