JSX和RN样式以及和web的不同之处

flex布局：

  • 在rn中默认容器， 布局方式，默认都是flex
  • 方向flex-direction: column

样式继承：

  • 背景颜色
  • 字体颜色
  • 字体大小等没有继承

单位：

  • 不能加px单位
  • 不能加vw、vh等单位
  • 可以加百分比单位
  1. View
  2. Text
  3. TouchableOpacity
  4. Image
  5. ImageBackground
  6. TextInput
  7. 其他 => 1.button 2. FlatList 3.ScrollView 4.StatusBar 5.TextInput

1.相当于以前web中的div

2.不支持设置字体大小， 字体颜色等

3.不能直接放文本内容

4.不支持直接绑定点击事件（一般使用TouchableOpactiy 来代替）

1.文本标签，可以设置字体颜色、大小等

2.支持绑定点击事件

可以绑定点击事件的块级标签

1.相当于块级的容器

2.支持绑定点击事件 onPress

3.可以设置点击时的透明度

1.渲染本地图片时

2.渲染网络图片时， 必须加入宽度和高度

3.在android上支持GIF和WebP格式图片

默认情况下Android是不支持gif和webp格式的， 只需要在 android/app/build.gradle 文件中根据需要手动添加以下模块：

一个可以使用图片当做背景的容器，相当于以前的 div + 背景图片

可以通过 onChangeText 事件来获取输入框的值

语法：

1、组件

2、插值表达式

3、状态state

4、属性props

5、调试

6、事件

7、生命周期

花括号{}里面可以直接添加JS代码的

函数组件

  • 没有state（通过hooks可以有）
  • 没有生命周期（通过hooks可以有）
  • 适合简单的场景

类组件

  • 适合复杂的场景
  • 有state
  • 有生命周期

最后

  • 公众号：小何成长，佛系更文，都是自己曾经踩过的坑或者是学到的东西
  • 有兴趣的小伙伴欢迎关注我哦，我是：何小玍。大家一起进步鸭

SheetJS！用于多种电子表格格式的解析器和编写器

在日常前端开发中，遇到批量导入的情况，通常是将文件上传至后端来解析excel文件流。这种做法会占用一定的带宽和后端性能，SheetJS是用于多种电子表格格式的解析器和编写器。通过使用SheetJS，前端可以直接实现.xlsx, .xlsm, .txt, .csv, .html等文件的导出和导入，比如，将execl文件转化为json，或者将json导出为execl。当然这一定程度上也会消耗前端的性能，但这对于数据安全更有保障，而且也有利于前后端交互的统一性。本文将介绍如何使用sheetJS，实现纯前端的execl数据导出和导入，并简单介绍sheetJS相关概念：

sheetJS社区版js-xlsx地址为：

相关概念

execl与js-xlsx之间的关系，这两者有着极强的对应关系，如下：

就像我们熟悉的execl文件一样，工作簿里有可能存在多个工作表，每个工作表里也很多单元格，js-xlsx有workBook对象，里面可以存在和创建Sheets，在Sheets对象里还存在很多的cell元素。

js-xlsx的安装

参考官方文档：

script引入：

CDN引入：

Json数据导出为execl文件

为了把json数据导出为execl文件，我们需要执行三个步骤：

  1. 创建工作簿，就是创建一个workBook对象；
  2. 在工作簿里新建工作表，就是新建Sheets对象；
  3. 把数据写入表格的单元格里，就是把Json数据写入cell中；

代码示例如下：

XLSX.utils.json_to_sheet获取对象数组并且返回一张基于对象自动生成\”headers\”的工作表。默认的列顺序由第一次出现的字段决定，这些字段通过使用Object.keys得到，不过可以使用选项参数覆盖。

原始的表单不能以明显的方法复制，因为JS对象的keys必须是独一无二的。之后用e_1 和 S_1替换第二个e 和 S。

或者可以跳过header行：

skipHeader:true导出会跳过表头字段。

除了json_to_sheet，还有其他的数据导入Sheets对象的方法：

  • aoa_to_sheet 把转换JS数据数组的数组为工作表。
  • table_to_sheet 把DOM TABLE元素转换为工作表。
  • sheet_add_aoa 把JS数据数组的数组添加到已存在的工作表中。
  • sheet_add_json 把JS对象数组添加到已存在的工作表中。

详情查看文档：

XLSX.utils.book_append_sheet用来把工作表添加到工作簿中，XLSX.utils.book_append_sheet(wb, sheet,name)方法有三个参数:

  • wb: 要写入的工作簿
  • sheet:工作表
  • name:工作表的名称

XLSX.write(wb, write_opts) 用来写入工作簿 wb。XLSX.writeFile(wb, filename, write_opts) 把 wb 写入到特定的文件 filename 中。如果是基于浏览器的环境，此函数会强制浏览器端下载。XLSX.writeFileAsync(filename, wb, o, cb) 把 wb 写入到特定的文件 filename 中。如果 o 被省略，写入函数会使用第三个参数作为回调函数。其中write_opts是写入配置，可以配置包括输出数据编码、把字节存储为类型d等等属性。filename就是文件名了。

excel文件读取为Json数据

首先，用到iview-UI的Upload组件，然后在组件的before-upload钩子（上传前）中执行数据解析。

FileReader 是一个常用的web API，FileReader 对象允许Web应用程序异步读取存储在用户计算机上的文件（或原始数据缓冲区）的内容，使用File和Blob对象指定要读取的文件或数据。FileReader.onload处理load事件，该事件在读取操作完成时触发。reader.readAsArrayBuffer开始读取指定的Blob中的内容, 一旦完成, result 属性中保存的将是被读取文件的 ArrayBuffer数据对象。

XLSX.read(data, read_opts) 用来解析数据 data。XLSX.readFile(filename, read_opts) 用来读取文件名 filename 并且解析。read_opts为读取配置，可以用来配置输入数据编码等。XLSX.utils.sheet_to_json把工作表转化为Json。

其实SheetJS除了简单的导入和导出excel文件之外，还支持其他的文件类型，而且还能设置文件样式等，功能强大，慢慢挖掘！

Github上流行的CSS3动画效果库，你有没有尝试过——animate.css

animate.css是一堆很酷，有趣且跨浏览器的动画，供你在项目中使用。非常适合强调，主页，滑块和一般的加水效果。

animate.css v4正在进行许多改进和重大更改，包括CSS自定义属性支持（又称CSS变量）和类前缀，以确保安全使用。感兴趣的小伙伴可以上github关注进展以及提供反馈！

animate.css的受欢迎程度毋庸置疑，在Github上star数高达接近63k，这是一个非常可观的数据，我相信其实大多数人或多或少都用过它

https://daneden.github.io/animate.css/

  • 使用npm安装

或者 yarn:

要在你网站中使用animate.css，只需将样式表放入文档的<head>中，然后将动画类（animated）与任何动画名称一起添加到元素中，那么一个简单的动画效果就实现了，一下就是一个最简单的例子：

以下是你可以使用的所用动画效果class

可以更改动画的持续时间，添加延迟或更改动画播放的次数：

  • JavaScript的用法：

将animate.css与Javascript结合使用时，可以使用animate.css进行大量其他工作。一个简单的例子：

还可以检测动画何时结束：

可以使用以下简单功能来添加和删除动画：

并像这样使用它：

注意，这些示例使用的是ES6的const声明，不再支持IE10和某些古老的浏览器。

  • 设定延迟和速度：

可以直接在元素的class属性上添加延迟，如下所示：

  • 快慢class

通过添加这些类，可以控制动画的速度，如下所示：

  • 自定义构建

Animate.css由gulp.js提供支持，这意味着你可以轻松创建自定义版本。

有些时候你看到别人的网站，感觉速度也不是很快，但是很自然，那么很有可能是使用了动画，使用动画不会加快网站的访问速度，但是可以让网页浏览器来更加的平滑、更加的自然，使用起来会感觉很舒适，不会给人卡顿的感觉！

本文作者及来源:Renderbus瑞云渲染农场https://www.renderbus.com

点赞 0
收藏 0

文章为作者独立观点不代本网立场，未经允许不得转载。

继续阅读本文相关话题

TAG
全部
行业动态
C4D教程
C4D百科