![](https://img-blog.csdnimg.cn/20190918140213434.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
ReactNative
文章平均质量分 55
基础与进阶
吃小笼包嘛?
分享是程序员的基本美德。力争分享优质资源,大家共同进步,共同加油!
展开
-
【整合】react-native 深入浅出 2020教程整合
(注:本文为整合博文,第一阶段正在连载中...努力通过工作之余做到周更,开始时间2020-08-27)整合整合整合本react-native系列博文适用于入门级、进阶级的小伙伴们浏览交流学习,大牛级小伙伴欢迎指教。本系列基于RN版本为:0.63.+ 或更高版本(基于2020最新RN版本)首先做个自我介绍,我是兔哥,小厂一线程序员,Android出身,从2017年接触RN0.46.+的版本摸爬滚打至今,踩过无数的坑,心酸血泪不再提,接下来愿为直面RN的小伙伴以后能开发的更顺畅而做出努.原创 2020-08-27 10:01:17 · 443 阅读 · 0 评论 -
react-native运行时报错 Error: `fsevents` unavailable (this watcher can only be used on Darwin)
Error: `fsevents` unavailable (this watcher can only be used on Darwin)在react-native run-android ios的时候报上述错误。原因是因为watchman版本过低,或者是环境出现错误,需要重新安装watchman。解决办法:npm r -g watchmanbrew install watchman...原创 2020-08-13 09:41:44 · 1581 阅读 · 0 评论 -
npm无法使用npm版本过低无法升级npm版本与node版本不匹配npm WARN npm npm does not support Node.js vx.x.x
npm WARN npm npm does not support Node.js vx.x.xnpm WARN npm You should probably upgrade to a newer version of node as wenpm WARN npm can't make any promises that npm will work with this version.npm WARN npm Supported releases of Node.js are the latest.原创 2020-08-12 10:01:49 · 16827 阅读 · 3 评论 -
react-native 手动移除 iOS UIWebView 解决苹果上架问题
前言:近期在苹果上架遇到问题,有一个老项目需要上架,提交App Store后,苹果对含有UIWebView API的App ,已经无法上传到App connect的后台。并会向您的开发者邮件发送以下错误信息:Dear Developer,We identified one or more issues with a recent delivery for your app, “xxx” x.x.x (x). Please correct the following issues, then uplo原创 2020-07-21 17:10:22 · 2646 阅读 · 1 评论 -
vscode双击选中单词,无法选中用中划线拼接的名称
设置里去掉 - 就可以了 // 执行文字相关的导航或操作时将用作文字分隔符的字符 "editor.wordSeparators": "`~!@#$%^&*()-=+[{]}\\|;:'\",.<>/?",转载 2019-07-04 08:54:55 · 3643 阅读 · 3 评论 -
ReactNative Error-PCH was compiled with module cache path…...
ReactNative 执行react-native run-ios 运行Ios项目时报错error: PCH was compiled with module cache path '/Users/abysskitty/Desktop/ReactNativeProject/jwtd_shipper/ios/build/ModuleCache/2BNSEWLE0I67U', but the p...原创 2018-04-06 15:20:19 · 313 阅读 · 0 评论 -
React Native 中组件的生命周期
React Native 中组件的生命周期概述就像 Android 开发中的 View 一样,React Native(RN) 中的组件也有生命周期(Lifecycle)。所谓生命周期,就是一个对象从开始生成到最后消亡所经历的状态,理解生命周期,是合理开发的关键。RN 组件的生命周期整理如下图:如图,可以把组件生命周期大致分为三个阶段:第一阶段:是组件第一次绘制阶段,如图中的上面虚线框内,在这里完...转载 2018-04-06 15:11:52 · 698 阅读 · 0 评论 -
ReactNative使用支付宝支付报错:方法不会覆盖或实现超类型的方法react-native-yunpeng-alipay
根据项目需求需要集成支付宝支付,如果报了以下错误,仅需注释四行代码就可以搞定哟!我使用的是 react-native-yunpeng-alipay当根据文档在Android上集成的时候,运行时报错:如下: /Users/abysskitty/Desktop/RNProject/KakouApp/node_modules/react-native-yunpeng-alipay/an...原创 2017-12-26 15:46:18 · 6104 阅读 · 0 评论 -
ReactNative入门(2)-创建项目指定版本查看版本更新版本
上一节相信大家都稳稳的 Hello ReactNative 了吧,接下来我们来认识一下ReactNative如何创建项目指定版本查看版本更新版本吧。所有react-native的操作命令都是以react-native开头的哟,例如 react-native run-ios创建项目基本操作 react-native init [项目名]就可以创建项目了,后面加上 --version 0.原创 2017-12-09 15:21:51 · 3512 阅读 · 0 评论 -
ReactNative入门(1)-入门第一课
写在前面:经过公司层层考虑,在试过各种app混合开发语言后,ReactNative以性能媲美原生的优势脱颖而出。虽然face***k的专利写的是霸道了点,但和我们开发人员一点关系都没有呀,ReactNative的思想很前线值得学习。学习之后发现入门ReactNative学习成本是非常高的,下面就罗列一下需要掌握哪些知识。一:学前班1.html+css js (ReactNativ原创 2017-12-09 14:48:31 · 257 阅读 · 0 评论 -
ReactNative Tried to register two views with the same name RNCViewPager
前言:ViewPager重复引用的两个错误错误1:Tried to register two views with the same name "RNCViewPager"错误2:Invariant Violation: requireNativeComponent: "RNCViewPager" was not found in the UIManager.接下来是解决问题的流程run-android报错如下:Tried to register two views with t.原创 2020-07-14 16:16:39 · 6529 阅读 · 0 评论 -
ReactNative在Xcode11更新后Unknown argument type ‘_attribute_’ 和 Could not find iPhone X simulator
本文转自:原文链接问题1:Could not find iPhone X simulator> react-native run-iosinfo Found Xcode project XXX.xcodeprojCoreData: annotation: Failed to load optimized model at path '/Applications/Xcode...转载 2020-03-12 09:35:55 · 659 阅读 · 0 评论 -
react-native text实现跑马灯功能
由于查阅资料封装好的跑马灯都不是很完善,点击回调、多条数据、支持不理想。所以自己又封装了一个。这里送给大家使用。欢迎大家提出意见或建议。ReactNativeMarquee,Support iOS and Android。使用了react-native中的Animated组件,利用纯js代码,实现Marquee(走马灯)组件。github:https://github.com/Z...原创 2019-02-25 16:35:11 · 10071 阅读 · 8 评论 -
ReactNative之Redux入门(2)- 初步使用教程
注:本教程针对于有过React/ReactNative开发经验的人群。redux的用法很灵活,根据项目需求,先来学习针对于react-native的基础用法。[redux] + [react-redux] + [redux-thunk]我在整理之前原本是像直接讲redux,但是觉得讲了也都不会,因为我是会用之后,过了好几天才捋清楚基础知识的,所以就直接先讲用法。等会用之后,再深入学习。先简述一下:...原创 2018-04-14 11:07:23 · 429 阅读 · 2 评论 -
ReactNative之props基础用法+究极体验
注:本教程针对于有过React/ReactNative开发经验的人群。一:基本使用创建一个子组件。export default class ItemProps extends Component {导入这个组件并在render中使用。在另一个组件中导入。import ItemProps from '../pages/ItemProps';export default class PropsPage...原创 2018-04-16 15:45:21 · 499 阅读 · 0 评论 -
ReactNative之state基础用法+究极体验
注:本教程针对于有过React/ReactNative开发经验的人群。本篇文章将对state做一个究极探究。知识点前瞻:1.state使用、React事务(transaction)、setState机制、render刷新机制。一:基本用法。1.初始化state。方式一:直接初始化(不推荐)在class里可以直接初始化state(不推荐)方式二:在构造函数中初始化(推荐)constructor(pr...原创 2018-04-16 15:46:05 · 2098 阅读 · 0 评论 -
ReactNative之Redux入门(3)- redux入门
注:本教程针对于有过React/ReactNative开发经验的人群。英文原版:http://redux.js.org/中文文档:http://www.redux.org.cn/阮一峰老师博客:http://www.ruanyifeng.com/blog/2016/09/redux_tutorial_part_one_basic_usages.html参阅文档和阮一峰老师的网络日志进行学习。可能在...原创 2018-04-16 16:25:22 · 277 阅读 · 0 评论 -
ReactNative之Redux入门(4)- react-redux入门
注:本教程针对于有过React/ReactNative开发经验的人群。阮一峰老师对于react-redux的讲解:http://www.ruanyifeng.com/blog/2016/09/redux_tutorial_part_three_react-redux.html为了方便使用,Redux 的作者封装了一个 React 专用的库 React-Redux,本文主要介绍它。这个库是可以选用的...原创 2018-04-16 16:25:50 · 524 阅读 · 0 评论 -
ReactNative之Redux入门(5)- redux-thunk中间件
注:本教程针对于有过React/ReactNative开发经验的人群。本篇文章可以略过。如果不了解中间件请阅读阮一峰老师的博客。阮一峰老师的博客: http://www.ruanyifeng.com/blog/2016/09/redux_tutorial_part_two_async_operations.html下一节我将摘录中间件的使用教程。redux-thunk中间件的作用就是可以接收函数。...原创 2018-04-16 16:26:13 · 603 阅读 · 0 评论 -
ReactNative之Redux入门(6)- 中间件认识以及其他中间件的推荐
注:本教程针对于有过React/ReactNative开发经验的人群。阮一峰老师的博客: http://www.ruanyifeng.com/blog/2016/09/redux_tutorial_part_two_async_operations.html其他中间件:redux-persistredux-sageredux-routerredux-arena......还有很多拓展中间件,有兴趣...原创 2018-04-16 16:26:37 · 525 阅读 · 0 评论 -
ReactNative之Image组件自适应高度,图片自适应大小
因为在现在0.50包括之前的ReactNative版本,Image组件必须要设置宽高才能显示。所以在图片宽高不确定的情况下,如何来让图片自适应屏幕高度呢?需求原因:因为做商城详情页面的图片长短不一,所以要自适应图片显示高度。这个需求就产生了。以下方法:getSize方法 传入imageUri(图片的uri路径,支持本地和网络路径)Image.getSize(imageUri,(width,heig...原创 2018-04-06 15:52:12 · 24325 阅读 · 2 评论 -
ReactNative之View组件分行显示Item,子控件超出宽度自动换行。
需求产生:这个需求呢是做属性气泡的时候产生的,比如热搜推荐的推荐气泡数量就不一定,所以要分行显示。如果大家认真阅读了flexbox的布局教程,那么应该会注意到flexWrap这个属性。这个就是换行的属性。RN的View直接就支持分行显示:flexWrap容器属性: `nowrap | wrap | wrap-reverse`flexWrap容器属性:nowrap-不分行wrap-分行wrap-re...转载 2018-04-06 16:03:49 · 12595 阅读 · 0 评论 -
ReactNative常用三方组件集合(整理)
1.导航react-navigationgithub:https://github.com/react-community/react-navigation安装:yarn add react-navigationornpm install --save react-navigation2.NativeBasegithub:https://github.com/GeekyAnts/NativeBas...原创 2018-04-06 16:09:00 · 560 阅读 · 0 评论 -
在ReactNative中使用Redux简述
写在前面:在ReactNative中,常常会有下面这样的需求。就是像登录一样,登陆成功,我需要做很多事情,存储用户信息、把别的页面(或上一级页面)存在的头像昵称给显示出来。有可能还需要修改离登录页有两个层级页面上的数据。基于我现在使用的ReactNative0.51.0版本和react-navigtion1.5.+版本。虽然可以修改navigtion的goBack方法来回参。但是层级一深,将变得难...原创 2018-04-13 11:33:33 · 6140 阅读 · 0 评论 -
Redux 入门教程(一):基本用法
转载注明出处:来源于阮一峰老师的网络日志http://www.ruanyifeng.com/blog/2016/09/redux_tutorial_part_one_basic_usages.html一年半前,我写了《React 入门实例教程》,介绍了 React 的基本用法。React 只是 DOM 的一个抽象层,并不是 Web 应用的完整解决方案。有两个方面,它没涉及。代码结构组件之间的通信对...转载 2018-04-13 09:40:47 · 414 阅读 · 0 评论 -
ReactNative之Redux入门(1)- Redux初步认识
注:本教程针对于有过React/ReactNative开发经验的人群。注:如果看了半小时看不懂,请进入下一节直接编写Demo,编写完Demo后再回来看基本概念。redux是什么?干什么用的?英文原版:http://redux.js.org/中文文档:http://www.redux.org.cn/阮一峰老师博客:http://www.ruanyifeng.com/blog/2016/09/redu...原创 2018-04-14 11:04:23 · 308 阅读 · 0 评论