React Native之React Navigation踩坑
自动重装系统之后,已经很长一段时间没有来写React Native了,今天空闲之余,决定重新配置React Native的开发环境,继续踩坑...
React Native的开发环境配置狠简单,只要依照网上给出的步骤,复制粘贴,在终端下操作就行。
React Native中文网开发环境配置
当一切都已完成之后,我怀着激动的心情,打开了Xcode,尝试运行一下,查看开发环境是否正常。
完美~~~一切都是那么的完美,Welcome to React Native!
我真是天才,一次性成功,牛逼吧!!O(∩_∩)O哈哈~,,,(老和尚卖瓜,自卖自夸,O(∩_∩)O哈哈~)
闲话不多说,开始记录记录这次开发环境配置过程中遇到的坑。
1、安装react-navigation时使用的是npm,结果在添加react-native-gesture-handler依赖库时,出现各种问题,错误提示已经找不到了。说下解决办法:
2、错误提示:Build input file cannot be found: '/Users/***/Desktop/reactnative/AwesomeProject/node_modules/react-native/third-party/double-conversion-1.1.5/src/strtod.cc'
解决办法:
Xcode:”file”->”project setting”->shared Porject settings:build system:’legacy build system
3、错误提示:bundling failed: Error: Unable to resolve module `@babel/runtime/helpers/objectSpread` from `/Users/***/Desktop/reactnative/AwesomeProject/node_modules/react-navigation-stack/lib/module/views/Header/HeaderBackButton.js`: Module `@babel/runtime/helpers/objectSpread` does not exist in the Haste module map。
解决办法:
yarn add @babel/runtime --dev
4、错误提示:react native with error:(SyntaxError:******* Unterminated string constant (21:6)
解决办法:看下是否有输入错误情况存在,这种情况,mac终端下一般都会进行标记。
5、坑爹描述:修改navigation返回按钮上的文字不起作用。
比如A->B,我在B的页面上写以下代码,没卵用。
static navigationOptions = {headerBackTitle:null,};
百度了很久也没有这种问题的解决办法,最后看文档,找到了答案,如下:
意思是:如果需要修改B上的返回按钮文字,需要在A中去写。尼玛,这种反人类设计,是谁设计的?修改如下:
StackNavigator({A: {screen: AScreen,navigationOptions: () => ({title: `A`,headerBackTitle: null}),},B: {screen: BScreen,navigationOptions: () => ({title: `B`,}),}
});
React Native之React Navigation踩坑相关推荐
- React Native小菜鸡的踩坑排雷记录(4)
一.Text增加点击态效果 在RN里,我们经常会遇到点击文字或者按钮有响应的.其中,我们的一些按钮是Text+style 去实现一个按钮样式的.当我们点击文字的时候,会出现只有文字被选中的阴影,而不是 ...
- React Native小菜鸡的踩坑排雷记录(1)
只是记录一下自己遇到的些许问题和解决方案的汇总,方便以后查阅. 废话不多说,直接上重点:(遇到的难题) 一.antd-design组件难以自定义样式 这里 antd-design 不像web一样,可以 ...
- Android 解决XXX Layout leaked 使用Navigation 踩坑 XML内存泄漏
Android 解决XXX Layout leaked 使用Navigation 踩坑 XML内存泄漏 报错日志 排查过程 泄漏原因 解决方案 最近维护一个项目,一个内存泄漏的的原因查了很久,这里记录 ...
- React Native之React速学教程
本文出自<React Native学习笔记>系列文章. React Native是基于React的,在开发React Native过程中少不了的需要用到React方面的知识.虽然官方也有相 ...
- React Native微信支付开发爬坑之旅
早闻微信支付一直为移动开发者所诟病,这次公司项目新增微信支付需求,一试果然是一把辛酸泪,从配置到与后台调试真是一波三折,整整花了一天的时间才从坑里爬出来,效率也是低.所以有必要做下总结,日后再有微信支 ...
- 【React Native】react-native-vector-icons用法避坑
在用React Native开发App时,icon的使用必不可少.官网推荐使用react-native-vector-icons来完成icon的使用. 在学习的过程中碰到了一个问题:一步一步按照官网说 ...
- 小谈React、React Native、React Web
React有三个东西,React JS 前端Web框架,React Native 移动终端Hybrid框架,React Web是一个源码转换工具(React Native 转 Web,并之所以特别提出 ...
- React Native与React的关系及特点
一.React.React.js和React Native的关系 React是基础框架,是一套基础设计实现理念,开发者不能直接使用它来开发移动应用或网页. 在React之上发展出了React.js框架 ...
- [React Native]升级React Native版本
React Native正式版本还没发布,但是小版本基本上每个月都更新1-2次.9月11号又更新了0.33版本,其中有两个增强功能正好是项目中用到的. 添加Android6.0权限验证API Add ...
最新文章
- Python中函数的参数传递与可变长参数
- xshell安装与配置,Xftp(不能连接虚拟机解决方法,sudo apt-get install openssh-server,服务没开怎么传输数据?)(虚拟机和windows之间自由复制)
- do not lie on the bed to watch pc or phones
- php调用sql数据库代码怎么写,PHP读取SQL文件并导入数据库(示例)
- *** is required and cannot be removed from the server
- 命令行 – 为什么pssh命令不起作用?
- 拓端tecdat|R语言线性判别分析(LDA),二次判别分析(QDA)和正则判别分析(RDA)
- wordpress修改mysql端口_wordpress更改默认端口的方法
- 负一的n次方c语言,c语言 10 负次方
- 老男孩python全栈3期_Python/Python3视频教程2017老男孩Python全栈工程师3期基础Python3.5...
- win10蓝屏代码_如何让电脑蓝屏 让电脑蓝屏方法介绍【详解】
- python图片保存pdf_python将JPG图片转换为PDF
- wifi共享大师开启失败发射功能失败
- FHIR标准和国际基于FHIR的互联互通实践(7):国际互联互通实践
- 广州大学--金融股票数据分析
- 华为复制加密门禁卡_将多种累赘门禁卡归一合并的最佳选择
- 错误: Failed to install 'unknown package' from GitHub: schannel: failed to receive handshake, SSL/TL
- 多线程并发中什么是竞争条件?
- 一文搞懂0.1UF和10UF电容并联使用技巧
- 小飞升值记——(7)