![](https://img-blog.csdnimg.cn/20201014180756927.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
React Native
文章平均质量分 62
孟凡涛
人生重要的不是所在的位置,而是所朝的方向
展开
-
Javascript数据类型知识点
JS数据类型一共有八种:Number、String、Boolean、null、undefined、Object、Symbol、BigInt。基本数据类型StringNumberBooleannullundefined引用数据类型ObjectArrayDateFunction如何判断数据类型判断数据类型的方法有很多,如instanceof、typeof、constructor,这里我们不讲最全的,只讲最贴近实用的,尽量避免混合使用造成错误。instanceof对未进行构造函数原创 2021-04-21 16:23:42 · 165 阅读 · 0 评论 -
React+hooks如何解决开发最基础的重复【渲染】问题?useMemo+useCallback
相信大部分React前端开发者对类组件的编程方式都有长时间的编码经验,对性能优化的方案亦有研究,如PureComponent、Component+ComponentShouldUpdate等,但随着大势所趋我们必须拥抱函数式编程+Hooks,那么我们之前的优化方案如何在函数式编程中得以实施呢?手头的RN项目正好有一个倒计时的小需求,就梳理一下几个hooks的API,如何帮助我们如何高性能的实现。脱敏之后的需求为:渲染12:21:01马上开抢倒计时。我们暂且做个约定,初始化几个参数 const co原创 2021-04-17 22:27:51 · 2102 阅读 · 0 评论 -
RecyclerListView组件之-为什么要选择它作为海量数据列表组件
React-Native recyclerlistview组件设计思路讲解、性能比对、内存复用原理原创 2021-02-23 14:08:04 · 706 阅读 · 0 评论 -
基于React Native实现的界面加载组件react-native-loadview
react-native-loadview基于React Native实现的界面加载组件,Installationnpm install react-native-loadview --saveImport into your projectimport LoadView from 'react-native-loadview';Examle useage用于界面数据处理load...原创 2018-09-20 16:52:33 · 2663 阅读 · 0 评论 -
WebView shouldStartLoadWithRequest 没有被触发是什么鬼?
1、我的项目是RN和H5块混合开发的,web用的是 react写的,路由和跳转是由官方组件 react-route 进行支持,所以我在进行界面跳转的时候用的是browserHistory.push(url),当我替换为window.location.href = url的时候问题解决了2、解决了这个问题之后,会遇到一个新的问题,就是React解决界面返回的问题,由于WebView的一个界面需要...原创 2018-07-02 11:17:41 · 2387 阅读 · 0 评论 -
React Native Xcode调试遇到未找到main.jsbudle文件
刚开始以为是main.jsbundle文件的项目位置有误,但是重新定位在文件系统的位置之后发现,这个文件确实是找不到了那么就来考虑一下如何重新生成这个文件吧1、先启动react-native 服务react-native start2、通过curl命令生成curl http://localhost:8081/index.ios.bundle -o main.jsbundle...原创 2018-06-27 10:41:55 · 2248 阅读 · 1 评论 -
通讯录逻辑
import React, { Component } from 'react'import { View, Text, TextInput, Image, ScrollView, InteractionManager, TouchableOpacity, TouchableWithoutFeedback, Modal, Animated, Platform, StyleSheet } from...原创 2018-05-15 09:56:01 · 452 阅读 · 0 评论 -
React Native Android打包出现的问题
一、./gradlew installRelease 出现* What went wrong:Execution failed for task ':app:bundleReleaseJsAndAssets'.> 'command 'node'' finished with non-zero exit value 1这个问题纠结了我了大量的时间,我尝试过二、./gra...原创 2018-05-10 20:34:12 · 2214 阅读 · 2 评论 -
React Native Android原生方向进阶一
虽然说react native的设计初衷是为了敏捷开发,write once,run anywhere,但是还是开放了原生接入这一高级功能,而原生也是一位这个开发方向一个绕不过去的坎,今天先跑了一下流程,总结一下先1、react-native init mengft_module 初始化一个react native项目,取名mengft_module,初尝0.55.1版本2、andr...原创 2018-04-09 18:37:29 · 317 阅读 · 0 评论 -
UnableToResolveError: Unable to resolve module `***`
这个问题很常见,原则上是任何npm依赖包都有可能发现这个问题,介绍下解决方案吧step one: rm -r node_modules step two: npm cache clean –force step three: npm install step four: nom start – –reset-cache一般step one, step three, step four...原创 2018-03-02 11:24:34 · 4439 阅读 · 1 评论 -
React Native 深度进化思考
过年这几天在家闲来无事,一直在思索React Native的深度学习与优化,寻找下一个突破的地方有人说只要会一点js,React Native上手就很容易,这句话没毛病,入门是没问题的,但是距离真正的商业项目的开发相差甚远1、代码习惯 2、架构设计 3、组件意识 4、原生基础无论是这四点的哪一点都需要长时间的用心积累才能有所长进,我现在也还是在培养意识的阶段,毕竟项目经验和天赋摆...原创 2018-02-22 10:34:15 · 348 阅读 · 0 评论 -
SyntaxError:Strict mode does not allow function declaration in a lexically nested statement.
最近在使用React Native集成环信的时候遇到了这个问题,原因是在文件头部声明了'use strict'但是你的项目里面还是出现了这种方法声明方式function ts () { var d = new Date() var Hours = d.getHours() // 获取当前小时数(0-23) var Minutes = d.getMinutes(...原创 2018-02-09 13:02:42 · 210 阅读 · 0 评论 -
基于React Native官方组件FlatList,增加可定制化“下拉刷新”、“下拉加载更多”组件API的新列表组件react-native-refresh-loadmore-flatlist
react-native-refresh-loadmore-flatlist基于React Native官方组件FlatList,增加可定制化“下拉刷新”、“下拉加载更多”组件API的新列表组件,具体实现功能如下:自定义下拉刷新组件API自定义上拉LoadMore组件APIInstallationnpm install react-native-refresh-loadmore-fl...原创 2018-09-20 16:55:36 · 2960 阅读 · 0 评论 -
基于React Native封装的资讯频道TopBar,常见于新闻客户端react-native-scrollable-topbar
react-native-scrollable-topbar基于React Native封装的资讯频道TopBar,常见于新闻客户端,具体实现功能如下:TopBar区域可手动滑动(Underline 联动)点击频道实现内容区切换根据内容区(this.props.children)触摸手势实现频道切换频道位置校准,左右边界临界位置处理,实现自动滑动校准Installationnpm...原创 2018-09-20 16:57:28 · 477 阅读 · 0 评论 -
基于React Native官方组件ScrollView与React-Navigation实现headerTitle与界面的滑动的交互效果react-native-scrollable-contain
react-native-scrollable-container基于React Native官方组件ScrollView与React-Navigation实现headerTitle与界面的滑动的交互效果Installationnpm install react-native-scrollable-container --saveImport into your projectimpo...原创 2018-09-20 16:59:56 · 684 阅读 · 0 评论 -
Android日常报错之 Program type already present...
Program type already present...在做React-Native Android项目集成的时候,app、react-native-mixpush两个模块都在lib文件夹引入了同一个jar包导致的错误,在app中删除这个jar包Sync grade file now, then build your project again....原创 2018-10-10 13:58:02 · 7137 阅读 · 0 评论 -
Android 日常报错之 Execution failed for task ':react-native-update:compileDebugNdk'
// 报错重要信息Execution failed for task ':react-native-update:compileDebugNdk'锁定module react-native-update,在build.gradle中添加android { sourceSets.main { jni.srcDirs = [] }}Sync grad...原创 2018-10-10 13:47:56 · 3566 阅读 · 0 评论 -
PushNotificationIOS 集成指南
PushNotificationIOS本文档贡献者:sunnylqm(100.00%)Projects with Native Code OnlyThis section only applies to projects made with react-native init or to those made with Create React Native App which have s...原创 2018-10-10 09:29:18 · 1716 阅读 · 1 评论 -
React Native 前端面试题目汇总,高频问题,提薪必会
ES6的新特性有哪些?该部分知识参考文献箭头操作符var array = [1, 2, 3];//传统写法array.forEach(function(v, i, a) { console.log(v);});//ES6array.forEach(v = > console.log(v));类的支持//类的定义class Animal { //ES6...原创 2018-10-16 10:32:35 · 6205 阅读 · 1 评论 -
Android 日常报错之 Android dependency 'com.android.support:support-v4' has different version
Caused by: java.lang.RuntimeException: Android dependency 'com.android.support:support-v4' has different version for the compile (26.1.0) and runtime (27.1.0) classpath. You should manually set the s...原创 2018-10-12 17:06:13 · 11107 阅读 · 1 评论 -
由SDK "iphoneos" cannot be located引起的C compiler cannot create executablesou问题
命令行错误信息,如下图出现在Xcode 项目build的过程中,错误提示Xcode路径定位错误,那就通过命令行重新指定Xcode路径,网上有人说是安装过多个Xcode版本的缘故sudo xcode-select --switch /Applications/Xcode.app/Contents/Developer/...原创 2018-09-21 18:33:32 · 1293 阅读 · 0 评论 -
React-Native 官方组件FlatLis 关于属性onEndReached、onEndReachedThreshold的几点使用总结
FlatList组件为什么依然这么难用官方提供的这款List组件相比于上一个版本的ListView来说已经优化很多了,但是,还是不能称之为一个成熟的组件。onEndReached、onRefresh两个属性的引入说明官方确实是想将下拉刷新、上拉加载的模式引入这个组件,但是从目前的现状来看,这两方面做的都差钱人意,那我们就来对这个组件进行一定的改造,来满足我们正常的开发需求。上拉加载我看到很...原创 2018-09-26 17:21:53 · 8030 阅读 · 0 评论 -
基于React Native封装的表单提交Container,用于替代RN官方组件KeyboardAvoidingView(不兼容Android)react-native-keyboardavoidv
react-native-keyboardavoidview基于React Native封装的表单提交Container,用于替代RN官方组件KeyboardAvoidingView(不兼容Android)Theory重写TextInput的onFocus方法,借助ScrollView的scrollResponderScrollNativeHandleToKeyboard实现屏蔽键盘遮挡Fo...原创 2018-09-20 17:04:03 · 1533 阅读 · 0 评论 -
基于React Native官方组件Image封装的具备加载生命周期视觉反馈的组件react-native-loading-image
react-native-loading-image基于React Native官方组件Image封装的具备加载生命周期视觉反馈的组件,具体实现功能如下:网络图片Pending状态渲染,提供闪烁动画、loading.gif两种方式网络图片Error状态渲染继承官方Image组件的所有属性Installationnpm install react-native-loading-ima...原创 2018-09-20 17:02:27 · 664 阅读 · 0 评论 -
React Native Modal系列总结
今天迭代版本围绕这个Modal遇到了一些问题,可是一个用法简单到不能再简单的Modal组件会有什么问题呢?是,错误的产生没有任何报错,连警告都没有,无从查起,就是导航出现了问题,卡死在当前界面,杀死程序之后还是能重新reload,那究竟这错误是如何产生的呢?我在通过导航进入界面的时候会根据props的一个status来决定Modal的Visible<AlertComponent原创 2018-01-08 15:43:17 · 2297 阅读 · 0 评论 -
React Native 扫码组件react-native-camera与自定义UI界面动画套装
扫码这个功能在普通项目中用到的案例还是比较多的,签到、加好友、WebView跳转等等针对扫码这个功能,react-native的前辈们已经封装好了可以跨平台的组件 react-native-camera 亲测是非常好用的,虽然有很多提Issue,但是最新的版本还是比较稳定的给大家说一下我在用的时候遇到的一个自己挖的坑 因为我的项目有不止一个界面用到了这个功能,所以我在不同的导航器原创 2018-01-19 15:24:51 · 9451 阅读 · 3 评论 -
React Native 天天见到却不深究的文件
一、package-lock.json大家都对package.json比较熟悉,package.json是node用来查找模块的其中一个文件,npm用来存放依赖的模块清单,但是package-lock.json是干什么的呢?package-lock.json是当 node_modules 或 package.json 发生变化时自动生成的文件。这个文件主要功能是确定当前安装的包的依赖,以便原创 2018-01-05 19:41:28 · 671 阅读 · 1 评论 -
SyntaxError:Strict mode does not allow function declaration in a lexically nested statement.
最近在使用React Native集成环信的时候遇到了这个问题,原因是在文件头部声明了'use strict'但是你的项目里面还是出现了这种方法声明方式function ts () { var d = new Date() var Hours = d.getHours() // 获取当前小时数(0-23) var Minutes = d.getMinutes() // 获取当前分钟原创 2017-09-01 10:27:15 · 156 阅读 · 0 评论 -
React Native 的代码规范
一、全局或者在当前项目中安装standardnpm install standard --save原创 2017-08-29 13:52:10 · 586 阅读 · 0 评论 -
React Native Saga中间件概念入门
React Native的中间件Saga深入浅出第一步: 浅显的讲解,有实例,适合新手入门转载 2017-08-28 17:02:01 · 936 阅读 · 0 评论 -
React Native Reducer结构较深与render map展示刷新问题
界面不刷新,到底是不是reducer结构或者没有重新new惹的祸???原创 2017-08-28 15:34:15 · 430 阅读 · 0 评论 -
React Native 的Image 保存、Picker、上传等一系列问题
图片问题,实时更新原创 2017-08-11 19:28:42 · 2303 阅读 · 0 评论 -
React Native DatePicker使用说明
项目里有几处功能用到了时间控件,想把Android和IOS的控件统一起来,但是从网上找了一遍开源库,界面相对较丑,而且使用起来很不友好,所以,还是坚持react native自带的组件吧一、IOS DatePickerIOS 这个组件其实中文网给出的已经比较详细了,我就直接上代码,大家自己感受就行<DatePickerIOS mode="date" minimumDat原创 2017-07-27 17:52:13 · 2940 阅读 · 0 评论 -
React Native 键盘KeyBoard问题
React Native KeyBoard键盘问题收集正路原创 2017-07-27 16:10:53 · 2009 阅读 · 1 评论 -
React Native的字体添加问题
引用GitHub上的开源组件 react-native-vector-icons/FontAwesome 来做Icon,在IOS上遇到了问题,大致就是字体未添加的意思,接下来,从这两个角度来解决这个问题原创 2017-07-12 17:15:25 · 598 阅读 · 0 评论 -
react-native-debugger调试工具
闲话就少说了,最近从大神那里新了解到的react-native调试工具优点???原创 2017-07-25 21:42:19 · 4407 阅读 · 0 评论 -
React Native布局常识与技巧 一
最初在接触React Native的布局时遇到了这个问题?在render方法的return中输出渲染的界面时,由于参数不同,输出界面是动态的原创 2017-07-06 18:08:28 · 280 阅读 · 0 评论 -
React Native 集成原生极光JMessage 踩坑
一坑、 [JCoreGlobal] Get sdk version fail![获取sdk版本失败!][JCoreGlobal] JCore .so file do not match JCore .jar file in the project, Failed to init JCore第二个问题出现有两种原因:.jar、.so版本号冲突;引用失败 结合第一个问题的出现我们锁定了原因是后者,原创 2017-11-09 15:32:25 · 3583 阅读 · 2 评论 -
React Native 集成极光推送 JPush出现的一些幺蛾子
Xcode报错error: /Applications/Xcode.app/Contents/Developer/Toolchains/XcodeDefault.xctoolchain/usr/bin/libtool: can’t locate file for: -ljcore-ios error: /Applications/Xcode.app/Contents/Developer/Too原创 2017-11-09 15:36:17 · 1922 阅读 · 0 评论 -
React Native 加载图片的正确姿势和遇到的一些幺蛾子
一、加载图片的正确姿势做过原生开发和在使用App时比较注重用户体验的都会注意到“List中加载过程中会出现跟业务相关的Loading图,当图片加载成功之后会消失;当图片加载失败之后会展示缺省的error图”,针对这个问题,自己尝试着在做RN的时候优化一下这些细节RN的提供的图片组件Image显然是没有提供这些优化的接口,但值得高兴的是,整个组件提供了图片加载的完成周期:onLoadStart:当开始原创 2017-11-09 16:08:38 · 4751 阅读 · 0 评论