react native
文章平均质量分 74
clf_programing
不定期发布有关RN以及React的资料,相关技巧以及踩坑记录,不发布官网文档里已经存在的资料,只发布在开发项目时遇到的坑以及解决方案,让大家都少走弯路,一起相互学习吧。
展开
-
React Native Windows下环境搭建
由于接触RN的时间也不短了,回想起刚接触RN时踩过的坑真是惨不忍睹,在此想把自己对于RN方面的经验和大家分享,让大家少走弯路,走向人生巅峰。关于React Native的环境搭建,react native 中文网里的文档已经做得很好了,我就不多赘述了,请移步 React Native中文网之环境搭建...原创 2018-02-26 15:25:51 · 206 阅读 · 0 评论 -
react-navigation之StackNavigator使用方法及附上超级详细样例代码
react-navigation 之 StackNavigator网上虽说有很多篇关于react-navigation的使用说明的文章和博客,不过我找了大半天也不见详细具体的使用方法,大部分都是介绍种种属性的,为此鄙人自告奋勇,整理了一份比较详细的有关react-navigation的使用样例代码,本篇文章先介绍StackNavigator的使用方法。StackNavigator实现不...原创 2018-02-28 18:25:28 · 4711 阅读 · 6 评论 -
'React/RCTBundleURLProvider.h' file not found
'React/RCTBundleURLProvider.h' file not found新建RN项目时在iOS端用xcode跑时有时会遇到 'React/RCTBundleURLProvider.h' file not found 错误,遇到这种错误一般有一下几种情况:1. 没有执行 npm install 命令,没有安装依赖,此时执行 npm install 安装依赖即可.2. 依赖已经安装,...原创 2018-03-08 20:08:42 · 5773 阅读 · 0 评论 -
Code Signing Error: Signing for "xxx" requires a development team. Select a development team in...
Code Signing Error: Signing for "xxx" requires a development team. Select a development team in the project editor.原因如下:1. 填写如下信息:不过有时即使填写了开发信息,运行时还是会抱着个错误,这时重启xcode后再次运行即可...原创 2018-03-08 20:28:24 · 15025 阅读 · 0 评论 -
react-navigation之TabNavigator使用方法及附上超级详细样例代码
react-navigation之TabNavigator使用方法及附上超级详细样例代码网上虽说有很多篇关于react-navigation的使用说明的文章和博客,不过我找了大半天也不见详细具体的使用方法,大部分都是介绍种种属性的,为此鄙人自告奋勇,整理了一份比较详细的有关react-navigation的使用样例代码,本篇文章继续介绍TabNavigator的使用方法。TabNavigator ...原创 2018-03-01 17:41:58 · 9735 阅读 · 3 评论 -
react-navigation之DrawerNavigator使用方法及附上超级详细样例代码
react-navigation之DrawerNavigator使用方法及附上超级详细样例代码网上虽说有很多篇关于react-navigation的使用说明的文章和博客,不过我找了大半天也不见详细具体的使用方法,大部分都是介绍种种属性的,为此鄙人自告奋勇,整理了一份比较详细的有关react-navigation的使用样例代码,本篇文章继续介绍DrawerNavigator的使用方法。DrawerN...原创 2018-03-01 18:01:09 · 7508 阅读 · 1 评论 -
react native里react-navigation与redux + react-navigation-redux-helpers插件整合方法及样例代码
react-navigation与redux + react-navigation-redux-helpers插件整合方法以前也做react-navigation与redux的整合,不过那时候react native以及react-navigation的版本都不高,前些天在做新项目时用的是rn0.54版本,react-navigation是1.3.0版本,当我按照低版本的方法进行整合时缺报错了,让...原创 2018-03-03 16:04:40 · 4640 阅读 · 4 评论 -
react-native热更新之CodePush详细介绍及使用方法
前两天在配置codePush时找到了一篇总结的非常好的文章,在这里分享给大家https://www.jianshu.com/p/28589c0be542?utm_campaign=maleskine&utm_content=note&utm_medium=seo_notes&utm_source=recommendation...转载 2018-03-04 17:03:21 · 25812 阅读 · 0 评论 -
react native Android端保持APP后台运行--封装 Headless JS
react native Android端保持APP后台运行--封装 Headless JS前些日子在做后台下载时踩了后台运行这个大坑,RN官网文档上面在安卓上提供了Headless JS方法,iOS上暂时没有提供后台运行的方法,不过众所周知,官网上面的文档实在是... 于是在全网一通好搜,终于让我发现了一个将Headless JS封装好了的第三方组件:react-native-backgroun...原创 2018-03-25 13:11:52 · 8180 阅读 · 1 评论 -
react native 保持屏幕常亮
react native 保持屏幕常亮(跨平台)安装npm install react-native-idle --savereact-native link react-native-idle使用import RNIdle from 'react-native-idle' RNIdle.disableIdleTimer() //保持屏幕常亮RNIdle.enableIdleTimer() ...原创 2018-03-25 13:19:24 · 5058 阅读 · 4 评论 -
third-party: 'config.h' file not found 解决方案
这个是常见错误,只需要在项目根目录下运行以下命令即可解决:cd node_modules/react-native/third-party/glog-0.3.4../../scripts/ios-configure-glog.sh原创 2018-04-18 09:06:37 · 4990 阅读 · 0 评论 -
fetch添加超时时间只需几行代码--fetch timeout
其实为fetch添加超时时间很简单,需要用到Promise.race()方法.Promise.race() 方法将多个Promise包装成一个新的Promise实例.var p = Promise.race([p1,p2,p3]);上面的代码中,只要p1,p2,p3中有一个实例先改变状态,p的状态就跟着改变,而那个率先改变的Promise实例返回值就传递给p的回调函数.Promise.race方法...原创 2018-04-06 13:30:19 · 14457 阅读 · 4 评论 -
React Native 剖析
React Native剖析React Native 现在是异常的火爆,我司最近也完成了一个 React Native 编写的项目,现在已经提测审核。大家关心的苹果会不会拒绝RN ,会不会拒绝 CodePush ,我们会用实际行动告诉大家。本文会介绍 React Native 的工作原理,让移动开发者从代码上了解框架。ReactReact 是 facebook 出品一个前端框架,是目前最火的框架。...转载 2018-04-20 09:30:14 · 331 阅读 · 0 评论 -
React Native面试题及常用知识
React Native面试题MONDAY. MARCH 26, 2018 - 2 MINSREACT NATIVE本文原创首发于公众号:ReactNative开发圈,转载需注明出处。本文会不定期不断更新,想查看最新版本请移步至https://github.com/forrest23/react-native-interview1.React Native相对于原生的ios和Android有哪些优...转载 2018-04-20 09:37:31 · 22347 阅读 · 0 评论 -
react native 由于平台差异导致ios平台上无缘无故出现背景色bug解决方案
react native 由于平台差异导致ios平台上无缘无故出现背景色bug解决方案有次在做有关图片的渲染时,需要在图片你上方显示图片的属性,图片底层的背景色是黑色,没有给图片上方的文字设置任何背景色,可是。。。在ios平台上面却出现了黑色的背景色,安卓上面正常,下面是解决方案:在style里加上一个属性即可,上代码:backgroundColor:'transparent'bug立即烟消云散...原创 2018-02-27 12:03:39 · 1259 阅读 · 0 评论 -
react native里在ios平台引用webview时由于平台差异无故出现黑边解决方案
react native里在ios平台引用webview时由于平台差异无故出现黑边解决方案不久前在做有关引用webview的开发时,页面中在webview的下方无缘无故出现了黑边,而且每一次横竖屏切换时黑边还会加粗,自己在谷歌百度上面一通好找。。。。还是没有解决此问题的方法,只找到了ios开发中此问题的解决方案,奈何我没有做过ios的开发。。。看不懂啊。。内心崩溃,经过一番琢磨,终于找到了此问题在...原创 2018-02-27 11:56:37 · 1095 阅读 · 1 评论 -
Execution failed for task ':app:installDebug'. > com.android.builder.testing.api.DeviceException:
Execution failed for task ':app:installDebug'.> com.android.builder.testing.api.DeviceException: No connected devices!当环境搭建好之后,运行新建react native 项目时可能会遇到连接不到设备的问题,截图如下:一下是导致出现这个问题的几个原因:1. 运行react n...原创 2018-02-26 16:45:33 · 8318 阅读 · 0 评论 -
com.android.builder.testing.api.DeviceException: com.android.ddmlib.InstallException: Failed to ...
Execution failed for task ':app:installDebug'.> com.android.builder.testing.api.DeviceException: com.android.ddmlib.InstallException: Failed to finalize session : INSTALL_FAILED_USER_RESTRICTED在安装...原创 2018-02-26 16:54:41 · 4498 阅读 · 0 评论 -
java.io.IOException: Could not delete path 'E:\rn\PentaxPhotoSync\android\app\build\generated\
Execution failed for task ':app:generateDebugBuildConfig'.> java.io.IOException: Could not delete path 'E:\rn\PentaxPhotoSync\android\app\build\generated\source\buildConfig\debug\com'. 相信不少人都遇到过ja...原创 2018-02-26 17:00:49 · 7603 阅读 · 0 评论 -
Overlay permissions needs to be granted in order for react native apps to ran in dev mode
Overlay permissions needs to be granted in order for react native apps to ran in dev mode直接上图:1. 允许其出现在其他应用上面2. 这是因为react native测试包需要获取 悬浮窗权限,进入手机设置页面,找到此APP 打开悬浮窗权限即可...原创 2018-02-26 17:11:10 · 1364 阅读 · 1 评论 -
通过手机端反向代理命令
react native 的安装包只需安装一次就可以一直用来测试了,即使你把电脑关了明天再次进行开发时也不用再次运行react-native run-android 命令了,只需在项目根目录下运行 下面命令:adb reverse tcp:8081 tcp:8081但是有一点,必须手动打开npm 服务器,因为react native 的代码都是从npm服务器上面拉去的,命令如下:npm start...原创 2018-02-26 17:20:57 · 2158 阅读 · 0 评论 -
react native 里安卓引用gif图片解决方案
react native 里安卓引用gif图片解决方案相信不少入了react native坑的人在安卓上面引用GIF图的时候都遇到了这种情况,引用了GIF图片却像引用了静态图片一样,下面是此问题的解决方案:在项目里找到android/app/build.gradle文件在dependencies字段中添加:compile 'com.facebook.fresco:animated-gif:0.13...原创 2018-02-27 10:20:53 · 4102 阅读 · 1 评论 -
react native安卓打包apk以及报错解决方案
有关react native里安卓打包流程中文网已经做得很好了,在此不再赘述,请移步react native安卓打包流程不过在打包过程中可能会遇到这样那样的错误,不外乎下面几条错误:1. 不能删除或者存在什么什么zip文件2. 打包异常上面原因皆是android里的缓存惹的祸,只要把缓存清理一下即可,下面是清理缓存方法:跳到android目录下执行下面命令:gradlew clean然后重新执行打...原创 2018-02-27 10:32:15 · 2810 阅读 · 0 评论 -
react native 自定义组件以及引用
react native 自定义组件以及引用在react native 里最重要的一个概念就是组件化,一个完整的项目就是由一个又一个的组件搭配组合起来的,你可以引用GitHub上面的第三方组件,也可以自定义组件,现在先讲一下自定义组件的流程。以我自己的例子为例:我定义了一个连接网络失败后的页面,如下图当然每个组件定义的时候都是写在一个单独的class里面,只需在定义是将此类到处即可,上代码:imp...原创 2018-02-27 10:54:54 · 8094 阅读 · 1 评论 -
react native 引用第三方组件方法
react native 引用第三方组件方法有关react native在GitHub上面的组件已经很多了,引用这些组件可以省去我们开发时耗费的时间和精力,下面那就介绍一下引用第三方组价的方法:1. 在github或者js.coach上面找到自己需要的组件,一般在readme都会有使用相应组件的使用和引用方法。2. 在自己项目根目录下 运行以下命令: npm install 组件名称 --s...原创 2018-02-27 11:06:46 · 978 阅读 · 0 评论 -
react native 里有关注释需要注意的地方
react native 里有关注释需要注意的地方react native 里不是所有的地方都可以用 // 注释的在<View></View>里是不可以使用 // 注释的,不然会报错的下面才是在<View></View>里注释的正确方法:{/*<Text style={styles.button}>{strings.Reload}<...原创 2018-02-27 11:13:32 · 1763 阅读 · 0 评论 -
react native里获取设备屏幕宽高
react native里获取设备屏幕宽高不多说,方法如下:import {Dimensions} from 'react-native'var {height,width} = Dimensions.get('window');height 即为屏幕高度width即为屏幕宽度原创 2018-02-27 11:17:15 · 10332 阅读 · 1 评论 -
react native平台判断
react native平台判断react native 时跨平台的,这点无需多说,不过在开发APP时有时需要根据不同的平台写不同的代码,这时就需要做平台判断了,直接上代码:import {Platform,}from'react-native';if(Platform.OS == 'ios'){ }else if(Platform.OS == 'android'){ }con...原创 2018-02-27 11:24:12 · 2228 阅读 · 0 评论 -
react native 修改第三方组件并保存
react native 修改第三方组件并保存相信不少道友引用第三方组件时会感到不尽人意,需要手动修改第三方组价你的源代码,但是不可能把所有的npm依赖包都放到GitHub或者gitlab上面,从gitlab或者github上面重新down代码执行npm install后以前自己修改的第三方组件里的代码却没有了,因为自己只是在本地修改了人家的源代码,重新执行npm install 时会重新从git...原创 2018-02-27 11:38:16 · 2093 阅读 · 1 评论 -
React v16.3新生命周期
关于React v16.3 新生命周期变更的部分react v16.3终于出来了,最大的变动莫过于生命周期去掉了以下三个componentWillMountcomponentWillReceivePropscomponentWillUpdate同时为了弥补失去上面三个周期的不足又加了两个static getDerivedStateFromPropsgetSnapshotBeforeUpdate当然...转载 2018-05-25 12:54:59 · 4405 阅读 · 0 评论