![](https://img-blog.csdnimg.cn/20201014180756925.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
React-Native
隔壁老何
qjsjhfl
展开
-
React-Native中Animate动画使用方法汇总整理(十)之动画的3种停止方法之动画完结篇
React-Native中Animate动画使用方法汇总整理(十)之动画的3种停止方法之动画完结篇写作时间:2021/9/24React-Native版本:0.63.2目标平台:iOS(安卓平台尚未检测)本篇是RN动画组件使用方式整理的第10篇,也是最终篇了,之前的内容都是在对动画的播放进行梳理,本篇则重点总结动画的停止方式。先看代码完整代码如下//App.js'use strict';import React from 'react';import AnimatedTest from原创 2021-09-24 17:48:52 · 1358 阅读 · 2 评论 -
React-Native中Animate动画使用方法汇总整理(九)之颜色变换的实现
React-Native中Animate动画使用方法汇总整理(九)之颜色变换的实现写作时间:2021/9/24React-Native版本:0.63.2目标平台:iOS(安卓平台尚未检测)本篇是RN动画组件使用方式整理的第9篇,对颜色变换的实现进行整理介绍,其实关于颜色变换的动画之前有文章总结过,但是现在看来效果不好,不成体系,所以这篇算是原先文章的改良版,先看动画效果完整代码如下//App.js'use strict';import React from 'react';import原创 2021-09-24 16:12:54 · 764 阅读 · 0 评论 -
React-Native中Animate动画使用方法汇总整理(八)之旋转动画的实现
React-Native中Animate动画使用方法汇总整理(八)之旋转动画的实现写作时间:2021/9/24React-Native版本:0.63.2目标平台:iOS(安卓平台尚未检测)本篇是RN动画组件使用方式整理的第8篇,重点对旋转动画的实现进行整理介绍,先看效果可以看到上面的动图展示了两个旋转效果,其中第一个是比较简单的平面旋转,第二个似乎有种立体的感觉完整代码如下//App.js'use strict';import React from 'react';import An原创 2021-09-24 15:56:09 · 2127 阅读 · 0 评论 -
React-Native中Animate动画使用方法汇总整理(七)之循环播放的实现
React-Native中Animate动画使用方法汇总整理(七)之循环播放的实现写作时间:2021/9/24React-Native版本:0.63.2目标平台:iOS(安卓平台尚未检测)本篇是RN动画组件使用方式整理的第7篇,重点对循环播放的实现进行整理介绍,没什么说的,先看效果吧核心就是调用了Animated.loop完整代码如下//App.js'use strict';import React from 'react';import AnimatedTest from './d原创 2021-09-24 15:24:31 · 2596 阅读 · 0 评论 -
React-Native中Animate动画使用方法汇总整理(六)之缩放的实现
React-Native中Animate动画使用方法汇总整理(六)之缩放的实现写作时间:2021/9/24React-Native版本:0.63.2目标平台:iOS(安卓平台尚未检测)整理的进度已经过半了,这种工作确实是非常的枯燥,坚持做完吧本篇是RN动画组件使用方式整理的第6篇,重点对缩放的实现进行整理介绍,上一篇简单对sequence和parallel进行了梳理,实际上通过parallel也实现了缩放效果,原理是同时改变视图的宽高,但是本篇采用了另外一种方式来实现类似的效果,先看最终的展示原创 2021-09-24 15:10:18 · 1602 阅读 · 1 评论 -
React-Native中Animate动画使用方法汇总整理(五)之利用sequence、parallel实现组合动画
React-Native中Animate动画使用方法汇总整理(五)之利用sequence、parallel实现组合动画写作时间:2021/9/23React-Native版本:0.63.2目标平台:iOS(安卓平台尚未检测)本篇是RN动画组件使用方式整理的第5篇,上篇主要整理了easing的诸多使用方法,但是这些变换方式是非组合性的,在实际的开发过程中,我们为了使动画效果变得更加丰富,通常希望动画能够提供组合效果,比如:在组件变宽的过程中高度降低,或者缩放的过程中改变透明度,或者组件的变换方式存在一原创 2021-09-23 17:05:15 · 1136 阅读 · 2 评论 -
React-Native中Animate动画使用方法汇总整理(四)之timing利用easing实现动画的灵活变换
React-Native中Animate动画使用方法汇总整理(四)之timing利用easing实现动画的灵活变换写作时间:2021/9/23React-Native版本:0.63.2目标平台:iOS(安卓平台尚未检测)本篇是RN动画组件使用方式整理的第4篇,上篇主要整理了动画配置的三种方法,分别是decay、spring和timing,其中timing最为常用,这是因为它可以灵活配置easing属性来实现实现灵活变换,关于easing的用法先看效果可以看到,虽然动画执行的终止状态是一致的,但是原创 2021-09-23 15:12:28 · 1025 阅读 · 2 评论 -
React-Native中Animate动画使用方法汇总整理(三)之动画配置方法的总结(timing、spring、decay)
React-Native中Animate动画使用方法汇总整理(三)之动画配置方法的总结(timing、spring、decay)本篇是RN动画组件使用方式整理的第三篇,前面主要是对动画执行的基本条件进行了整理,这篇主要整理动画配置里可供使用的三种方法,分别是:timing、spring、decay,先看效果可以看到,不同的动画配置方法会导致动画产生不同的效果完整代码如下//App.js'use strict';import React from 'react';import Animate原创 2021-09-23 14:25:31 · 611 阅读 · 0 评论 -
React-Native中Animate动画使用方法汇总整理(二)之useNativeDriver的优化及适用范围
React-Native中Animate动画使用方法汇总整理(二)之useNativeDriver的优化及适用范围写作时间:2021/9/23React-Native版本:0.63.2目标平台:iOS(安卓平台尚未检测)本篇是RN动画组件使用方式整理的第二篇,上一篇通过一个简单的案例实现了动画的展示,本篇的案例仍然非常简单,但重点在于记录useNativeDriver参数的使用范围,先看效果吧实现上面动画的关键就是对opacity进行正确的控制,这里使用了useNativeDriver来对动画进原创 2021-09-23 10:39:15 · 1380 阅读 · 0 评论 -
React-Native中Animate动画使用方法汇总整理(一)之简单动画的实现
React-Native中Animate动画使用方法汇总整理(一)之简单动画的实现RN中动画的使用是比较频繁的,好的动画也能给页面展示带来很好的增益效果,之前关于动画的使用写过一篇笔记,但是很片面也不完善,这次打算做一个整理汇总,把动画组件里涉及的使用方法进行一个总结,以笔记合集的形式输出,本篇主要关注动画的基本实现,先看效果吧实现上面的简单动画只需要保证代码中包含以下3个要素即可1、state中维护动画执行所依赖的变量2、添加动画组件,将需要动态变化的量与state中维护的变量绑定3、制定动画原创 2021-09-23 09:53:51 · 925 阅读 · 0 评论 -
React-Native中的FlatList学习记录(三)之keyExtractor值不唯一造成的错误
React-Native中的FlatList学习记录(三)之keyExtractor值不唯一造成的错误写作时间:2021/9/22React-Native版本:0.63.2目标平台:Android、iOS开发过程中遇到的一个错误,最后发现是由于数据源有两个item具有相同的key值,代码如下//App.js'use strict';import React from 'react';import List from './demos/demo_1/List';export defaul原创 2021-09-22 21:06:25 · 284 阅读 · 0 评论 -
React-Native中的FlatList学习记录(二)之单个item刷新
React-Native中的FlatList学习记录(二)之单个item刷新写作时间:2021/9/22React-Native版本:0.63.2目标平台:Android、iOSFlatList数据过多的时候,通常希望能够针对某个需要修改的item进行局部刷新,下面举4个具体的实现方案,其中既包含可行方案也包含不可行的方案方案一:直接修改某个item中的数据(不可行)//App.js'use strict';import React from 'react';import List fr原创 2021-09-22 20:37:48 · 1010 阅读 · 0 评论 -
React-Native中的FlatList学习记录(一)之keyExtractor
写作时间:20年末或21年初吧具体时间记不得了React-Native版本:0.63.2目标平台:Android、iOSFlatList是RN中的一个重要组件,打算做一个系列,对其使用方法和注意事项进行系统的学习整理,这期主要是记录keyExtractor的若干使用场景和对应现象情景1:父组件维护一组复杂的列表数据,其中keyExtractor取列表中每一项的key值,当点击按钮之后,数据更新。代码如下://App.jsimport React from 'react';import {V原创 2021-09-10 11:22:23 · 1399 阅读 · 0 评论 -
React-Native setState的若干使用方法速记
写作时间:2020年末吧具体时间记不得了开发平台:windowsReact-Native版本:0.63.4目标平台:Android、iOS变量什么时候使用state来维护1、变量如果是通过props从父组件中获取,就不要使用state2、如果这个变量可以通过其他的状态state或者属性props通过数据处理得到,不要使用state3、如果变量在render中没有使用到,那就不是一个state4、变量在整个生命周期中都保持不变时,也不是一个state总的来说:State是可变的,是组件内部原创 2021-04-28 22:00:52 · 410 阅读 · 0 评论 -
ReactNative中TouchableOpacity和TouchableHighlight的区别
ReactNative中TouchableOpacity和TouchableHighlight的区别写作时间:2021/2/3开发平台:macOSReact-Native版本:0.63.2目标平台:Android、iOSTouchableOpacity:当按下的时候,封装的视图的不透明度会降低。TouchableHighlight:当按下的时候,封装的视图的不透明度会降低,同时会有一个底层的颜色透过而被用户看到,使得视图变暗或变亮。效果:测试代码'use strict';import原创 2021-02-03 16:50:57 · 857 阅读 · 0 评论 -
ReactNative利用Animated(动画)实现颜色(backgroundColor)的动态变化
写作时间:2020/7/20开发平台:macOS目标平台:Android、iOS现要实现一个组件的背景颜色交替闪烁(两个颜色来回变换),考虑Animated组件是个可行的选择,下面给出具体操作方法1、首先需要在this.state当中维护变量color,背景颜色依据它的变化来进行改变this.state = { color: new Animated.Value(0),};2、添加如下方法,该方法实现的内容是先在一秒之内将color的值由0变为1,再用一秒的时间将color的值由1变原创 2020-07-21 10:40:25 · 2502 阅读 · 3 评论 -
Android原生跳转至React-Native的实现方案
写作时间:2020/4/27晚React-Native版本:0.62开发平台:windows目标平台:android本案例在初始化的RN项目上进行修改,将初始界面改为原生界面,如下图所示上图提供了一个按钮,点击即可进入RN界面,如下图所示该项目的具体实现过程和源码如下:1 初始化RN工程:react-native init Init这里我的项目名称为Init2 修改App.j...原创 2020-04-30 09:46:17 · 948 阅读 · 0 评论 -
利用React-Native实现的排序小工具
写作时间:2020/4/27React-Native版本:0.62.2界面是下面这样的,实现的功能就是当你输入一系列数字(用空格隔开)的时候,会自动对你所输入的内容进行排序,并进行显示。具体的实现的代码如下,如果你想运行代码查看效果,只需新建一个RN工程,并将下面的代码替换原App.js中的代码即可。// App.jsimport React, {Component} from 're...原创 2020-04-29 12:20:40 · 530 阅读 · 0 评论 -
React-Natvie中的Touchable系列组件
写作时间:2020/4/27React-Native版本:0.62.2开发平台:Windows目标平台:Android在RN项目的开发过程中,除了使用Button组件之外,通常需要对按钮的样式进行自定义。RN为我们提供了Touchable系列组件,将它包裹在自定义的按钮外面,即可实现和Button组件相同的功能。以下代码是对常见的Touchable组件进行的总结,如果你想运行下面的代码...原创 2020-04-28 18:06:03 · 142 阅读 · 0 评论 -
React-Native中fetch本地json文件
写作时间:2020/4/26React-Native版本:0.62开发平台:windows目标平台:android如果你想了解如何利用fetch获取网络数据,可以查看这篇文章React-Native使用FlatList组件实现上拉加载功能在开发项目的过程中,很多时候需要我们自行模拟后台数据。本文通过一个具体的RN项目来展示如何fetch本地的json文件,尽可能地模拟获取真实网络数据。...原创 2020-04-27 09:50:37 · 682 阅读 · 0 评论 -
react-navigation(5.x)新版本使用(五)之自定义header返回键
写作时间:2020/4/26React-Native版本:0.62React-Navigation版本:5.Xreact-navigation在实现页面跳转的过程中,会自动为页面添加返回键,但是有些特殊的情况下,需要对返回键进行自定义,从而实现更为复杂的功能。以下是针对新版本(5.x)的自定义header按键实例,主要展示如何对页面顶部的左右按键进行设置,实现自己所需要的功能。整个案例共两个...原创 2020-04-26 10:48:59 · 2199 阅读 · 2 评论 -
React-Native使用FlatList组件实现上拉加载功能
写作时间:2020/4/17React-Native版本:0.62本案例实现了FlatList组件的上拉加载功能,数据源于知乎,URI有失效可能,但整个代码结构可以参考import React, {Component} from 'react';import {ActivityIndicator, StyleSheet, FlatList, View, Text, Alert} from ...原创 2020-04-17 20:47:55 · 507 阅读 · 0 评论 -
react-navigation(5.x)新版本使用(三)之参数传递
写作时间:2020/4/11React-Native版本:0.62React-Navigation版本:5.X开发平台:Windows目标平台:Android参数传递其实没啥需要多讲的,就是固定的格式。本文介绍两种情况下的参数传递1 在同一个Stack内两个组件的参数传递2 点击不同的Tab将数据传递给对应的首页情况1组件间的跳转通过navigate函数实现,该函数除了可以实现跳...原创 2020-04-17 19:36:39 · 1840 阅读 · 2 评论 -
react-navigation(5.x)新版本使用(二)之Stack和Tab的嵌套以及在次级界面隐藏底部tab
写作时间:2020/4/10React-Native版本:0.62React-Navigation版本:5.X开发平台:Windows目标平台:Android注:在对文章涉及的代码进行测试之前,请先确认你已经成功安装如下内容// react-navigation(5.x)npm install @react-navigation/nativenpm install react-na...原创 2020-04-17 19:32:35 · 2575 阅读 · 12 评论 -
react-navigation(5.x)新版本使用(一)之利用class代替function实现页面跳转
写作时间:2020/4/9React-Native版本:0.62React-Navigation版本:5.X开发平台:Windows目标平台:Android注:在对文章涉及的代码进行测试之前,请先确认你已经成功安装如下内容// react-navigation(5.x)npm install @react-navigation/nativenpm install react-nat...原创 2020-04-17 19:29:58 · 1148 阅读 · 2 评论 -
React-Native嵌入Redux数据管理实例
写作时间:2020/4/10-2020/4/15React-Native版本:0.62.2React-Navigation版本:5.XRedux版本:4.0.5开发平台:Windows目标平台:Android注:该项目不涉及原生内容,所以理论上在macOS上应该同样可以运行本文将Redux和RN项目相结合,编写了一个简单的RN工程,工程界面如下(三个界面)上面的图是首页,点击按钮...原创 2020-04-17 17:03:39 · 430 阅读 · 0 评论 -
React-Native与Android原生数据通信之回调函数
写作时间:2020/4/8React-Native版本:0.62.2Android Studio版本:3.5.2开发平台:Windows目标平台:Android在RN的开发过程中,有时会不可避免地使用原生模块。本文通过利用回调函数实现RN和Android原生之间的通信。实现的结果是在RN界面输入文字之后,将文字发送给原生,原生在收到文字之后对其进行简单处理(添加后缀)再返回给RN界面。如...原创 2020-04-17 14:32:21 · 1515 阅读 · 3 评论 -
React-Native与原生通信之Toast模块
写作时间:2020/4/7React-Native版本:0.62.2Android Studio版本:3.5.2开发平台:Windows目标平台:Android在RN的开发过程中,有时会不可避免地使用原生模块。本文通过RN调用Android原生的Toast模块来实现从RN到原生的通信。1 通过react-native init命令创建一个初始项目,打开项目中的App.js文件,将代码全...原创 2020-04-17 12:24:39 · 377 阅读 · 0 评论 -
vscode中React-Native项目代码规范设置方法
写作时间:2020/4/17React-Native版本:0.62IDE:vscode本文介绍如何在vscode中设置RN项目的代码规范,利用.eslintrc.js和.prettierrc.js两个文件对规范进行制定和修改1 在VSCode中搜索ESLint并进行安装2 将.eslintrc.js和.prettierrc.js两个文件替换掉原工程当中的文件// .eslintrc.j...原创 2020-04-17 10:19:39 · 979 阅读 · 1 评论 -
react-navigation(5.x)新版本使用(四)之为底部标签栏添加图标
React-Native项目利用React-Navigation添加底部标签栏图标写作时间:2020/4/16React-Native版本:0.62React-Navigation版本:5.X开发平台:macOS目标平台:iOS利用新版react-navigation(5.x)做一个底部标签栏,想给标签栏添加图标,按照官网的代码进行操作出现了一些问题,现将实现过程总结如下1 在某个文...原创 2020-04-16 20:29:32 · 1594 阅读 · 0 评论