React Native之React Navigation踩坑
自动重装系统之后,已经很长一段时间没有来写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 Android配置部署踩坑日记
万事开头难 作为一只进入ECMAScript世界不久的菜鸟,已经被React Native的名气惊到了,开源一周数万星勾起了我浓烈的兴趣.新年新气象,来个HellWorld压压惊吧^_^(故意少打个' ...
- 【React Native】React Native项目设计与知识点分享
闲暇之余,写了一个React Native的demo,可以作为大家的入门学习参考. GitHub:https://github.com/xujianfu/ElmApp.git GitHub:https ...
- React Native & react-native-web-player & React Native for Web
React Native & react-native-web-player & React Native for Web https://github.com/dabbott/rea ...
- React Native之React速学教程(下)
概述 本篇为<React Native之React速学教程>的最后一篇.本篇将带着大家一起认识ES6,学习在开发中常用的一些ES6的新特性,以及ES6与ES5的区别,解决大家在学习Reac ...
- React Native之React速学教程(中)
概述 本篇为<React Native之React速学教程>的第一篇.本篇将从React的特点.如何使用React.JSX语法.组件(Component)以及组件的属性,状态等方面进行讲解 ...
- React Native之React速学教程(上)
概述 本篇为<React Native之React速学教程>的第一篇.本篇将从React的特点.如何使用React.JSX语法.组件(Component)以及组件的属性,状态等方面进行讲解 ...
- ant.design React使用Echarts,实力踩坑
最近项目用到Echarts(以下用ec代替),于是照猫画虎得引入到团队的antd项目中,但是遇到2个棘手问题: 1. ec对dom不渲染,检查后发现,原来是全局存在id重复,所以使用React时,最好 ...
- react-native —— 在Mac上配置React Native Android开发环境排坑总结
配置React Native Android开发环境总结 1.卸载Android Studio,在终端(terminal)执行以下命令: rm -Rf /Applications/Android\ S ...
- 小谈React、React Native、React Web
React有三个东西,React JS 前端Web框架,React Native 移动终端Hybrid框架,React Web是一个源码转换工具(React Native 转 Web,并之所以特别提出 ...
随机推荐
- SpringBoot+Redis简单使用
1.引入依赖 在pom.xml中加入 <dependency> <groupId>org.springframework.boot</groupId> <ar ...
- 软帝学院:一万字的Java基础知识总结大全(实用)
Java基础总结大全(实用) 一.基础知识: 1.JVM.JRE和JDK的区别: JVM(Java Virtual Machine):java虚拟机,用于保证java的跨平台的特性. java语言是跨 ...
- 查看python版本多少位的
正常我们在cmd终端输入python之后,如果有安装python,就会在回车之后出来关于你安装的python版本信息,几版本,多少位的,但是还有一种,像我这样只显示了python版本是3.7.5,并没 ...
- 爬b站视频直链
本来用的api爬取的url失效了(可能是) 就换成了貌似切换不了清晰度的api接口 http://api.bilibili.com/playurl?aid=61735306&page=1&am ...
- Linux使用alias自定义命令自定义快捷键
比如我经常需要进入一个很深的目录如 /home/walking/weblogic/devlop/script/application/.../... 这样每次进入这个目录操作是不是很麻烦,可能有时候记 ...
- Ant Design 错误记录
Ant Design 错误记录 一: 标签页Tabs 1:设置activeKey或defaultActiveKey,绑定默认值不起作用: => 需要同时设置activeKey和defaul ...
- JavaScript工具库
jPublic 交流QQ群:1017567122 前言 在我们开发项目的时候,无论项目规模大小,在所难免会写一些工具型函数来解决一些问题,随着项目开发和维护的时间越来越长,这些工具型函数会越来越多,同 ...
- LeetCode刷题191127
数据库: 1179 部门表 Department: +---------------+---------+| Column Name | Type |+---------------+-------- ...
- redis5.0.0功能介绍以及主从集群、哨兵搭建
这两天突然想起redis,索性就再尝试一下搭建最新版本的redis,过程有点艰辛呀,记录一下,供自己和大家今后搭建做参考. 一.为什么用Redis? 我自己总结了一下: 1.基于内存实现的key-va ...
- 基于django中间件的编程思想
目录 前言 前期准备 importlib模块介绍 基于django中间件的编程思想 django中settings源码 配置文件的插拔式设计 基于django中间件的思想,实现功能配置 前言 在学习d ...