隔壁老何-CSDN博客

原创 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 1439 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 810

原创 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 2217

原创 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 2667

原创 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 1665 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 1210 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 1070 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 656

原创 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 1424

原创 React-Native中Animate动画使用方法汇总整理（一）之简单动画的实现

React-Native中Animate动画使用方法汇总整理（一）之简单动画的实现RN中动画的使用是比较频繁的，好的动画也能给页面展示带来很好的增益效果，之前关于动画的使用写过一篇笔记，但是很片面也不完善，这次打算做一个整理汇总，把动画组件里涉及的使用方法进行一个总结，以笔记合集的形式输出，本篇主要关注动画的基本实现，先看效果吧实现上面的简单动画只需要保证代码中包含以下3个要素即可1、state中维护动画执行所依赖的变量2、添加动画组件，将需要动态变化的量与state中维护的变量绑定3、制定动画

2021-09-23 09:53:51 966

原创 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 306

原创 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 1076

原创 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 1458

原创 javaScript中的继承

在基于类的语言中，对象是类的实例，并且类可以从另一个类继承。JavaScript是一门基于原型的语言，这意味着对象直接从其他对象继承。JavaScript提供了一套极为丰富的代码重用模式，能够实现继承的方法有很多。在了解这些方法之前，首先要对"对象"这个概念具备一定认知对象_ _ proto _ _在JS里，万物皆对象。而__proto__是每个对象都有的属性。__proto__属性都是由一个对象指向一个对象，它的作用是当访问一个对象的属性不存在时，就会去它的__proto__属性所指向的

2021-09-06 20:16:50 75

原创 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 427

原创 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 892

原创 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 2559 3

原创 vscode git merge请输入一个提交信息以解释此合并的必要性

利用vscode控制台执行git的merge操作时，有时会出现如下信息：请输入一个提交信息以解释此合并的必要性，尤其是将一个更新后的上游分支合并到主题分支。控制台的显示如下图所示下面给出处理方法1 键盘输入i，进入insert状态，在该状态下你可以修改控制台中的文字，填你想填写的内容，如下图所示2 输入完之后，按esc退出insert状态3 按shift + :（注意：当前应处于英文输入法状态），当底部出现冒号之后，再输入wq，回车即可，如图所示...

2020-05-13 10:38:39 8453 1

原创 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 984

原创利用React-Native实现的排序小工具

写作时间：2020/4/27React-Native版本：0.62.2界面是下面这样的，实现的功能就是当你输入一系列数字（用空格隔开）的时候，会自动对你所输入的内容进行排序，并进行显示。具体的实现的代码如下，如果你想运行代码查看效果，只需新建一个RN工程，并将下面的代码替换原App.js中的代码即可。// App.jsimport React, {Component} from 're...

2020-04-29 12:20:40 556

原创 React-Natvie中的Touchable系列组件

写作时间：2020/4/27React-Native版本：0.62.2开发平台：Windows目标平台：Android在RN项目的开发过程中，除了使用Button组件之外，通常需要对按钮的样式进行自定义。RN为我们提供了Touchable系列组件，将它包裹在自定义的按钮外面，即可实现和Button组件相同的功能。以下代码是对常见的Touchable组件进行的总结，如果你想运行下面的代码...

2020-04-28 18:06:03 149

原创 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 695

原创 react-navigation(5.x)新版本使用（五）之自定义header返回键

写作时间：2020/4/26React-Native版本：0.62React-Navigation版本：5.Xreact-navigation在实现页面跳转的过程中，会自动为页面添加返回键，但是有些特殊的情况下，需要对返回键进行自定义，从而实现更为复杂的功能。以下是针对新版本（5.x）的自定义header按键实例，主要展示如何对页面顶部的左右按键进行设置，实现自己所需要的功能。整个案例共两个...

2020-04-26 10:48:59 2224 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 532

原创 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 1879 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 2599 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 1178 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 439

原创 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 1577 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 408

原创 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 1014 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 1615

原创 Unity射线检测实例

Unity射线检测实例运行这个脚本，如果按下鼠标左键时，其所在位置产生的射线和物体相交，那么物体颜色发生改变using System.Collections;using System.Collections.Generic;using UnityEngine;public class Manager : MonoBehaviour{ void Update() { ...

2019-08-18 14:40:47 785

原创 SpringBoot简单项目上传至腾讯云服务器部署流程

SpringBoot简单项目上传至腾讯云服务器部署流程1.在本地生成一个简单的SpringBoot项目，不含数据库2.生成jar包，内含tomcat，服务器中无需再安装3.购买一台云服务器或者免费试用，安装jdk4.将jar包放到云服务器上并运行素材来源https://blog.csdn.net/qq_41602595/article/details/84771759主要参考了第一种...

2019-08-02 14:58:56 703

weixin_42405831的博客