React Native之React Navigation踩坑

摘要:
自动重装系统之后,已经很长一段时间没有来写ReactNative了,今天空闲之余,决定重新配置ReactNative的开发环境,继续踩坑...ReactNative的开发环境配置狠简单,只要依照网上给出的步骤,复制粘贴,在终端下操作就行。完美~~~一切都是那么的完美,WelcometoReactNative!  1、安装react-navigation时使用的是npm,结果在添加react-native-gesture-handler依赖库时,出现各种问题,错误提示已经找不到了。  5、坑爹描述:修改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依赖库时,出现各种问题,错误提示已经找不到了。说下解决办法:

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

百度了很久也没有这种问题的解决办法,最后看文档,找到了答案,如下:

React Native之React Navigation踩坑第1张

意思是:如果需要修改B上的返回按钮文字,需要在A中去写。尼玛,这种反人类设计,是谁设计的?修改如下:

StackNavigator({
  A: {
    screen: AScreen,
    navigationOptions: () =>({
      title: `A`,
      headerBackTitle: null
    }),
  },
  B: {
    screen: BScreen,
    navigationOptions: () =>({
      title: `B`,
    }),
  }
});

免责声明:文章转载自《React Native之React Navigation踩坑》仅用于学习参考。如对内容有疑问,请及时联系本站处理。

上篇C# TreeView右键弹出菜单如何快速安装 allure下篇

宿迁高防,2C2G15M,22元/月;香港BGP,2C5G5M,25元/月 雨云优惠码:MjYwNzM=

相关文章

react + antd Table实现表格数据合并

效果如下 其实这种情况也可以使用树形数据表格展示,但是表格合并展示,看起来更直观.反正产品说哪种展示就哪种展示吧 我这里用到两种类型的后台数据,一种是一维数组数据,一种是有层级的二维数组. 表格合并最后要用到的数据都是一维数据,所以需要对数据处理一下.这两种处理方式对data数据从后台接口获取也一样适用 上代码,项目是react+typescr...

React 表格行点击事件

<Table dataSource={this.dataSources} columns={this.columns} onRow={(record) => {//表格行点击事件 return { // onClic...

10分钟学会React Context API

Create-react-app来学习这个功能: 注意下面代码红色的即可,非常简单. 在小项目里Context API完全可以替换掉react-redux. 修改app.js import React, { lazy, useState } from "react"; import { Button } from 'antd'; import { Hash...

最全前端资源汇集(引)

综合类地址 前端知识体系http://www.cnblogs.com/sb1987... 前端知识结构https://github.com/JacksonTia... Web前端开发大系概览https://github.com/unruledboy... Web前端开发大系概览-中文版http://www.cnblogs.com/unrule... Web...

react踩坑-各种异常解决方案

1.react项目导入PropTypes报错: Typo in static class property declaration react/no-typos 如果使用PropTypes一直报错,先看看是不是大小写的问题,应该是propTypes 参考文章:  https://blog.csdn.net/Beuty_Chen/article/detai...

react根据后台返回的组件路径动态的引入组件(react动态加载组件)

搭建react项目时,刚开始路由的配置文件都是写死的,每写一个组件然后都需要自己去路由的配置文件中进行配置路由。其实刚开始觉得也很正常,因为动态import感觉很难实现。但是项目需求后台需要记录那些组件的路径以及路由 跳转的路径。所以就想到了哪些数据都由后台返回,前端只需要根据后台返回的路径动态的引入组件。 一开始后台返回的是完整路径,比如说自己写的组件在...