自动重装系统之后,已经很长一段时间没有来写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依赖库时,出现各种问题,错误提示已经找不到了。说下解决办法:

  以后如果安装过程中出现npm * fix这类的,估计就玄乎了,可以试下yard来安装。创建项目是后面跟上—version 0.56.0当前版本号。如果不知道的可以去react native官网查看。以下四步:按顺序操作就行。react-native init AwesomeProject —-version 0.56.yarn add react-navigatioyarn add react-native-gesture-handlreact-native link

  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踩坑的更多相关文章

  1. React Native Android配置部署踩坑日记

    万事开头难 作为一只进入ECMAScript世界不久的菜鸟,已经被React Native的名气惊到了,开源一周数万星勾起了我浓烈的兴趣.新年新气象,来个HellWorld压压惊吧^_^(故意少打个' ...

  2. 【React Native】React Native项目设计与知识点分享

    闲暇之余,写了一个React Native的demo,可以作为大家的入门学习参考. GitHub:https://github.com/xujianfu/ElmApp.git GitHub:https ...

  3. 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 ...

  4. React Native之React速学教程(下)

    概述 本篇为<React Native之React速学教程>的最后一篇.本篇将带着大家一起认识ES6,学习在开发中常用的一些ES6的新特性,以及ES6与ES5的区别,解决大家在学习Reac ...

  5. React Native之React速学教程(中)

    概述 本篇为<React Native之React速学教程>的第一篇.本篇将从React的特点.如何使用React.JSX语法.组件(Component)以及组件的属性,状态等方面进行讲解 ...

  6. React Native之React速学教程(上)

    概述 本篇为<React Native之React速学教程>的第一篇.本篇将从React的特点.如何使用React.JSX语法.组件(Component)以及组件的属性,状态等方面进行讲解 ...

  7. ant.design React使用Echarts,实力踩坑

    最近项目用到Echarts(以下用ec代替),于是照猫画虎得引入到团队的antd项目中,但是遇到2个棘手问题: 1. ec对dom不渲染,检查后发现,原来是全局存在id重复,所以使用React时,最好 ...

  8. react-native —— 在Mac上配置React Native Android开发环境排坑总结

    配置React Native Android开发环境总结 1.卸载Android Studio,在终端(terminal)执行以下命令: rm -Rf /Applications/Android\ S ...

  9. 小谈React、React Native、React Web

    React有三个东西,React JS 前端Web框架,React Native 移动终端Hybrid框架,React Web是一个源码转换工具(React Native 转 Web,并之所以特别提出 ...

随机推荐

  1. SpringBoot+Redis简单使用

    1.引入依赖 在pom.xml中加入 <dependency> <groupId>org.springframework.boot</groupId> <ar ...

  2. 软帝学院:一万字的Java基础知识总结大全(实用)

    Java基础总结大全(实用) 一.基础知识: 1.JVM.JRE和JDK的区别: JVM(Java Virtual Machine):java虚拟机,用于保证java的跨平台的特性. java语言是跨 ...

  3. 查看python版本多少位的

    正常我们在cmd终端输入python之后,如果有安装python,就会在回车之后出来关于你安装的python版本信息,几版本,多少位的,但是还有一种,像我这样只显示了python版本是3.7.5,并没 ...

  4. 爬b站视频直链

    本来用的api爬取的url失效了(可能是) 就换成了貌似切换不了清晰度的api接口 http://api.bilibili.com/playurl?aid=61735306&page=1&am ...

  5. Linux使用alias自定义命令自定义快捷键

    比如我经常需要进入一个很深的目录如 /home/walking/weblogic/devlop/script/application/.../... 这样每次进入这个目录操作是不是很麻烦,可能有时候记 ...

  6. Ant Design 错误记录

    Ant Design 错误记录 一: 标签页Tabs 1:设置activeKey或defaultActiveKey,绑定默认值不起作用: =>    需要同时设置activeKey和defaul ...

  7. JavaScript工具库

    jPublic 交流QQ群:1017567122 前言 在我们开发项目的时候,无论项目规模大小,在所难免会写一些工具型函数来解决一些问题,随着项目开发和维护的时间越来越长,这些工具型函数会越来越多,同 ...

  8. LeetCode刷题191127

    数据库: 1179 部门表 Department: +---------------+---------+| Column Name | Type |+---------------+-------- ...

  9. redis5.0.0功能介绍以及主从集群、哨兵搭建

    这两天突然想起redis,索性就再尝试一下搭建最新版本的redis,过程有点艰辛呀,记录一下,供自己和大家今后搭建做参考. 一.为什么用Redis? 我自己总结了一下: 1.基于内存实现的key-va ...

  10. 基于django中间件的编程思想

    目录 前言 前期准备 importlib模块介绍 基于django中间件的编程思想 django中settings源码 配置文件的插拔式设计 基于django中间件的思想,实现功能配置 前言 在学习d ...