React Native
关注
分享
扫一扫
文章平均质量分 77
mayundoyouknow
喜欢运动，爱思考
展开
-
23.React Native触摸事件处理学习；
目录1.什么是触摸事件2.基础触摸事件组件3.React Native单组件触摸响应3.1申请成为响应者和释放响应者3.2合成事件介绍-evt4.嵌套组件事件传递4.1正常事件响应顺序4.2父视图拦截事件传递5.手势识别-PanResponder5.1PanResponder类介绍5.2gestureState参数介绍5.3PanResponder基...原创 2019-09-25 17:29:04 · 820 阅读 · 0 评论 -
20.React Native动画效果实例系列三-条形进度条-兼容IOS和Android；
目录1.实现多平台支持进度条-纯JS1.1进度条代码1.2进度条使用示例1.3效果图1.实现多平台支持进度条-纯JS1.1进度条代码import React, {Component} from 'react';import {StyleSheet, View, Animated} from 'react-native';/** * 实现横向进度条 */...原创 2019-06-26 10:56:30 · 1524 阅读 · 6 评论 -
19.React Native动画Animated效果三种动画类型二；
目录1.介绍2.Animated.decay()2.1方法2.1.1value参数值2.1.2config参数有以下这些属性：2.2示例-执行缩放2.2.1初始化缩放值2.2.2绑定缩放值2.2.3定义执行动画类型并调用start()启动2.2.4完整示例3.Animated.spring()3.1方法3.1.1value参数值：3.1...原创 2019-06-22 08:44:39 · 4919 阅读 · 0 评论 -
20.React Native常用功能系列一-帧布局；
1.实现效果如下：2.实现方式借助marginTop实现效果显示样式，设置marginTop为负值将向上移动实现次效果titleView:{ width:width-15*2, height:130, marginTop: -50, ... },2.1实现代码 renderDisConnect(){ ...原创 2019-06-12 08:53:34 · 902 阅读 · 0 评论 -
20.React Native常用功能系列一-toast通知使用和封装；
目录1.react-native-easy-toast组件介绍2.react-native-easy-toast组件的具体使用2.1在App.js中封装toast组件3.toast完整代码在移动端常用的通知消息采用采用toast通知的方式；1.react-native-easy-toast组件介绍官网地址：https://www.npmjs.com/package/re...原创 2019-06-12 08:39:46 · 2126 阅读 · 4 评论 -
19.React Native动画效果一；
目录1.Animated动画的基本使用过程1.1创建透明度的初始值（也可以创建其他属性的初始值）1.2绑定透明的值到样式（style）的opacity属性上1.3.设置动画执行效果并启动动画1.4.启动动画1.5.完整示例代码1.Animated动画的基本使用过程1.1创建透明度的初始值（也可以创建其他属性的初始值）通过Animated.Value(...原创 2019-06-20 21:36:20 · 1048 阅读 · 0 评论 -
React Native之react-navigation动态修改标题、页面导航等
目录1.navigation导航对象相关参数1.1在当前Component获取navigation导航对象1.2navigate方法1.2.2使用示例1.2.3源码1.3params1.4navigation的state属性2.动态修改标题-title或者左右显示组件-headerRight2.1动态修改标题2.2动态修改左右显示组件-headerRi...原创 2019-06-16 20:55:10 · 5439 阅读 · 0 评论 -
20.React Native常用功能系列二-集合类Set；
目录1.Set1.1Set介绍1.2语法1.3简述2.Set基础操作增删改查2.1迭代Set2.2Array相关2.3数组去重1.Set1.1Set介绍Set 对象允许你存储任何类型的唯一值，无论是原始值或者是对象引用。1.2语法new Set([iterable]);参数iterable如果传递一个可迭代对象，它的所有元素将不重复...原创 2019-06-15 09:39:04 · 1197 阅读 · 0 评论 -
20.React Native常用功能系列二-集合类Map；
目录1.Map1.1介绍1.2描述2.Map相关操作-增删改查3.Map排序3.1以Value排序3.2以key排序4.Map和JSON转换1.Map1.1介绍Map 对象保存键值对。任何值(对象或者原始值) 都可以作为一个键或一个值。语法new Map([iterable])参数iterableIterable 可以是一个数组或者其他...原创 2019-06-15 09:08:14 · 2292 阅读 · 0 评论 -
React Native 定时器使用
import React, {Component} from 'react';import {Text} from 'react-native';export default class TimerDemo extends Component{ static navigationOptions = { headerTitle:"定时器",//标题 }; ...转载 2019-06-03 08:15:59 · 484 阅读 · 0 评论 -
Cancel All Subscriptions and Asyncs in the componentWillUnmount Method, how?
问题原因：我们经常需要在异步操作中更新state状态值，通过更新state状态值变化来实现界面内容显示的更新，有时候异步操作执行完成更新state状态，但是用户已经返回上一界面，当前页面已经销毁就会出现上面的错误；解决办法：1.定义isMount变量标识当前组件的状态； constructor(props){ super(props); th...原创 2019-05-28 16:24:42 · 697 阅读 · 0 评论 -
18.React Navtive组件之间传值
目录1.父组件传值给子组件1.1静态传值，通过props传值1.2动态传值，借助ref属性，获取子组件，调用子组件方法传值2.子组件传值给父组件3.兄弟组件之间传值4.props和state介绍：RN中每个界面可以是一个组件显示也可以由多个组件组合显示，以便于维护和复用，界面显示需要各种值、用户输入数值或者数据交互，那么就会牵涉组件之间传值，组件传值主要有父组件传值给子...原创 2019-05-23 14:05:00 · 762 阅读 · 0 评论 -
12.React Native数据本地存储-Realm
目录1.Realm是什么？2.使用的前提条件3.Realm配置3.1Realm配置4.Realm使用(增删改查)4.1Realm支持的数据类型4.2打开Realm4.3插入数据示例4.4删除数据4.5Realm实现数据更新4.5.1更新属性4.5.2通过主键更新对象4.6数据查询4.7普通的数据迁移(Migrations)4.8Li...原创 2019-07-01 18:06:10 · 1876 阅读 · 0 评论 -
19.React Native动画效果操作集合四
目录1.插值动画1.1插值动画1.2使用过程2.动画组合2.1Animated.parallel()并行启动动画2.2Animated.sequence()按顺序启动动画3.动画循环4.跟踪动态值5.跟踪手势5.1Scroll滚动6.响应当前的动画值1.插值动画1.1插值动画每个属性都可以首先通过插值运行。插值将输入范围映射到输出范围，...原创 2019-07-08 10:38:06 · 1383 阅读 · 0 评论 -
12.React Native数据本地存储-Realm封装
目录1.创建Schema数据模型对象2.创建数据迁移模型(默认数据数组)3.Realm管理4.批量数据插入处理5.完整代码示例1.创建Schema数据模型对象const MoviesSchema={ name:'Movies', primaryKey:'id', properties:{ id:'string', ...原创 2019-07-03 15:43:13 · 835 阅读 · 0 评论 -
22.React Native避免键盘对TextInput遮挡一
目录1.KeyboardAvoidingView2.react-native-keyboard-aware-scroll-view3.Keyboard Module4.QQ聊天示例4.1实现类似QQ聊天效果，点击输入框以后可以继续停留在未弹出键盘的位置；4.2键盘显示或隐藏总是滚到底部键盘遮挡在开发中难免会用于（TextInput）输入框，可能会遇到键盘遮挡Tex...原创 2019-09-19 19:59:06 · 3781 阅读 · 0 评论 -
17.React Native定义和创建对象二
1.定义类//定义固件升级类export default class FireWareData{ //构造函数 constructor(data){ //成员变量 this.data=data; } out(){ console.log(data); }}2.创建对象//创建对象...原创 2019-09-07 11:32:03 · 969 阅读 · 0 评论 -
12.React Native文件创建、查看、下载、上传-react-native-fs
目录1.react-native-fs是什么？2.react-native-fs支持哪些功能？3.react-native-fs如何使用？4.react-native-fs功能介绍？5.文件操作说明5.1文件目录说明5.2文件创建5.3文件删除5.4文件读取5.5文件上传（支持IOS和Android）5.6文件修改5.7文件移动和复制5.8文件是...原创 2019-08-30 15:20:31 · 13530 阅读 · 1 评论 -
react-navigation 之StackNavigator 使用 正向传真及其回调
这里写三个界面为栗子StackNavigator 会按添加的顺序直接先显然Reactnav这个界面先附上效果图步骤1import Reactnav from './Components/ReactNav';import ReactSecNav from './Components/ReactNavSec'import ReactThirdNav from './Co...转载 2019-08-07 19:47:14 · 206 阅读 · 0 评论 -
React Native优化取消Fetch API请求
实际开发过程中经常涉及fetch网络请求，某个页面点击进去网络请求过程中即退出界面，放置不必要的网络请求，界面销毁时取消网络请求如今，Fetch API已经成为现在浏览器异步网络请求的标准方法，但Fetch也是有弊端的，比如： Fetch还没有方法终止一个请求，而且Fetch无法检测上传进度 现在我们可以通过AbortController和AbortSignal来终止，代码...转载 2019-07-25 15:44:35 · 1333 阅读 · 0 评论 -
Facebook 发布全新 JS 引擎！专注提高 React Native 应用的性能
Facebook 于昨日发布了新的 JavaScript 引擎：Hermes，专注于提高 React Native 应用的性能，并且在市面上那些内存较少、存储速度较慢且计算能力低下的移动设备上都有良好的表现。移动应用变得愈加繁重的同时也愈加复杂了。开发者为应用添加新功能时通常会遇到卡顿等性能问题。虽然出现性能问题的原因是多种多样的，但用户不关心这些，他们只希望自己在任何设备上使用应用时都能...转载 2019-07-25 14:53:01 · 473 阅读 · 0 评论 -
14.JavaScript：async/await的实际使用
1.需要异步加载几个参数然后进行网络请求1.1数据存储类，异步读取数据import {storage} from "./Storage";export default class StorageOpt{ /** key:保存的key值 object：保存的value expires：有效时间， */ static save(k...原创 2019-07-18 08:27:35 · 348 阅读 · 0 评论 -
JS正则语法规则和使用示例
目录1.JS语法规则1.1方括号1.2元字符1.3量词1.4RegExp 对象属性2.使用示例^和$字符说明：什么情况下用，那就看自己的需求。一般来说，正则中的^表示开头，$表示结束。这两个都是零宽度字符(其实不是字符,只是位置,类似的还有\A,\Z,\B,\b)。^\d匹配字符串开头位置的一位数字。\d$匹配字符串结尾位置的一位数字。/^\d/ ...原创 2019-07-13 21:56:14 · 259 阅读 · 0 评论 -
JS正则处理基础说明
目录1.什么是正则表达式？2.正则的语法2.1语法示例3.正则表达式字符串常用操作3.1search3.2replace4.RegExp 对象4.1语法4.2RexExp常用方法4.2.1exec4.2.2test4.3支持正则表达式的 String 对象的方法4.3.1match4.3.2spilt1.什么是正则表达式？正则表达式...原创 2019-07-10 08:15:41 · 417 阅读 · 0 评论 -
21.react native 使用AsyncStorage 存储搜索历史记录
目录1.通过AsyncStorage和react-native-storage封装存储管理类2.实现搜索记录存储、查询、清除2.1查询2.2存储2.3清除2.4历史记录效果图3.示例源码1.通过AsyncStorage和react-native-storage封装存储管理类/** * 数据 */import { AsyncStorage } fro...原创 2019-06-29 09:24:06 · 904 阅读 · 0 评论 -
JS数组常见操作
let array = ['22222', '333333', '444444'];1.数组长度let length = array.length;console.log(length);长度：32.增加新的元素到数组中 并返回新的数组长度push(...items: T[]): number;let array = ['22222', '333333', '44444...原创 2019-07-09 22:17:21 · 681 阅读 · 0 评论 -
React Native之SectionList使用扩展-九宫格
实现九宫格的几种方式(两种)1.通过设置SectionList的contentContainerStyle属性实现实现思路说明如下a.添加contentContainerStyle属性样式contentContainerStyle={// 主轴方向横向显示，所有内容横向显示flexDirection:'row',// 设置此属性为了一行显示不下,换一行flexWrap:'...原创 2019-05-17 15:56:10 · 1287 阅读 · 0 评论 -
React Native之SectionList使用扩展-分组折叠
目录1.分组折叠效果图2.实现思路2.1维护一套显示的数据放在state中2.2点击分组时修改this.state.cellDataArray中的数据2.3判断分组下是否需要显示数据3.示例完整代码4.注意事项4.1extraData4.2data4.3key1.分组折叠效果图2.实现思路显示的数据如下：//源收据 ...原创 2019-05-17 11:37:49 · 2364 阅读 · 0 评论 -
React Native bind方法 和 () => 函数(ES6)
为什么把这个知识点放在这里呢，因为我们在查找资料的过程中，经常用到这两个函数，不过小萌学习是基于ES6的，所以()=> 函数是很常用的,所以说一这两个函数这个问题其实是一个 JavaScript 中的问题。JavaScript中jQury的bind方法为选定元素添加事件处理程序，规定事件发生时运行的函数，所以后期需要我们学习一下JavaScript 基本语法，不要着急哦。语法为：...转载 2019-05-16 19:00:57 · 745 阅读 · 0 评论 -
8.React Native之StackNavigator和TabNavigator结合使用
说明：StackNavigator基于react-navigation库，TabNavigator基于react-native-tab-navigator库目录1.TabNavigator介绍2.TabNavigator属性介绍3.TabNavigator.Item属性介绍4.TabNavigator使用示例4.1添加库几种方式4.2引入react-nativ...原创 2019-03-04 16:38:18 · 1569 阅读 · 0 评论 -
7.React Native之StackNavigator实现页面跳转及navigationOptions参数说明；
目录 1.StackNavigator介绍2.StackNavigator属性介绍2.1RouteConfigs2.2StackNavigatorConfig3.StackNavigator使用示例3.1添加react-navigation库几种方式3.2引入react-navigation库3.3创建StackNavigator组件3.4调用StackNa...原创 2019-02-25 18:51:27 · 4948 阅读 · 0 评论 -
6.2React Native基础ScrollView和FlatList；
目录1.ScrollView1.1ScrollView介绍1.2ScrollView常用属性1.3ScrollView常用方法1.4. 获取原生事件2.FlatList2.1FlatList介绍2.2FlatList常用属性2.3FlatList常用方法2.4FlatList示例2.4.1示例2.4.2.FlatList添加头部和尾部组件2...原创 2019-02-13 17:15:54 · 4408 阅读 · 0 评论 -
6.React Native基本组件介绍；
目录1.View(容器)2.TouchableOpacity(触摸控件)2.1TouchableOpacity实现原理2.2常用属性2.3触摸事件监听3.Text3.1Text介绍3.2常用属性3.3常用的样式Style4.Image4.1Image介绍4.2图片加载方式4.3常用属性4.4常用的监听事件4.4方法5.TextInpu...原创 2019-01-16 08:26:59 · 973 阅读 · 0 评论 -
6.1React Native基础CSS和Flex布局；
目录1.React Native组件属性(Props,State)1.1Props1.1.1Props是什么？1.1.2组件默认属性1.1.3为组件(Component)自定义属性1.2State1.2.1State是什么2.Flexbox布局2.1Flexbox是什么2.2Flexbox基础知识2.3Flexbox主轴和侧轴（次轴）2.4Flexb...原创 2019-01-25 08:33:53 · 724 阅读 · 0 评论 -
5.React Native组件之生命周期-版本React16.4
目录 1.React 组件（Component）生命周期图解2.组件(Component)生命周期说明2.1实例化阶段函数分析2.1.1constructor()2.1.2getDerivedStateFromProps()2.1.3componentDidMount()2.2props或者state更新阶段函数分析2.2.1getDerivedStateFro...原创 2018-12-18 18:39:29 · 503 阅读 · 0 评论 -
React16新的生命周期函数getDerivedStateFromProps的使用，你也许并不需要派生状态【译】
原文：You Probably Don’t Need Derived StateReact16.4包含一个关于getDerivedStateFromProps的bugfix，可以让React组件中的一些现有bug以更一致的方式重现。如果这次变动导致了您的应用程序使用了反模式，并且出现在修复后没有正常工作的情况，我们对这种情况感到抱歉。在这篇文章中，我们将解释一些具有派生状态的常见反模式和我们首...翻译 2018-12-13 18:42:23 · 3243 阅读 · 1 评论 -
2.React Native环境搭建和创建第一个程序Hello World；
目录 1.首先整理一些React Native项目环境搭建1.1先了解一下几个概念1.2实际开放环境的搭建2.创建我们的第一个项目Hello World2.1创建HelloWorld项目项目2.2运行项目2.2.1IOS运行2.2.2Android设备运行3.React Native开发工具说明3.1WebStorm下载和激活3.2WebSotrm运...原创 2018-11-08 18:58:39 · 776 阅读 · 0 评论 -
React Native调试技巧与心得
在做React Native开发时，少不了的需要对React Native程序进行调试。调试程序是每一位开发者的基本功，高效的调试不仅能提高开发效率，也能降低Bug率。本文将向大家分享React Native程序调试的一些技巧和心得。Developer MenuDeveloper Menu是React Native给开发者定制的一个开发者菜单，来帮助开发者调试React Native应用。...转载 2018-11-09 17:09:29 · 399 阅读 · 0 评论 -
4.React Native项目开发如何配置调试
本篇主要项目开发中如何调试及调试配置；RN调试感觉比较痛苦，没有Android开发或者IOS开发那么灵活，说说如何配置；1.在你运行起来的Android项目界面按住⌘-M会弹出如下列表2.选择Debug JS Remotely选项会自动打开浏览器http://10.0.2.2:8081/debugger-ui，我们将IP地址改为127.0.0.1，然后开发控制台窗口接下来就...原创 2018-11-09 16:51:01 · 544 阅读 · 0 评论 -
3.React Native项目目录结构介绍；
目录 1.初始创建目录结构说明2.编辑React Native中的JS代码3.编写IOS/Android原生代码4.如何添加第三方react native npm源码库4.1仅仅涉及React Native开发4.2涉及React Native和IOS或者Android混合开发5.第三方代码添加到libs包中6.项目实际开发的目录结构1.初始创建目录结构说明...原创 2018-11-09 16:09:24 · 5127 阅读 · 0 评论