React-Native 6.X版本,安装使用react-navigation

时间:2021-7-20 作者:qvyue

2021年,由于公司的合作方是使用React-Natvie作为跨平台app的开发,为了与合作方更好的对接,连接更紧密一些,所以我们也要迁就对方,使用React-Native。本来想请教一下,我们同事的前端,结果人家都是使用vue,根本对React ,React-Native,都不了解,所以只能自己去研究喽。在2021年去研究React-Native,难度还真不少。

1.资料都是以前的2016年,2017年,2018年,2019年的,语法没有更新(ES6,ES7),很多直接复制代码进去,都会报错,或者自己看不懂
2.视频也有很多是以前的,也有些是2020年左右的,算是比较新的,人家大佬讲得比较综合,你也可能看不懂,比喻在讲Redux,他们不是拿最简单的例子来讲,而是拿一个比较综合的例子,有各种封装,最后,你也是懞~
3.还有一些情况是他们不是用React-Native的环境 ,而是有React作为环境来讲的,比喻他们讲Redux的时候
4.资料没有一个循序渐进地过程,没有从最基础的开始,直接来案例,或者是实战,语法等几乎略过~

本篇用来记录,本人在学习React-Natvie遇到的各种坑,然后是怎么趟过这些坑的,希望对新人有一点帮助。

本人搭建的环境 ,都是最新的环境,如下:Mac Big Sur电脑,VS Code,

React-Native 6.X版本,安装使用react-navigation
mac.png

React-Native 6.X版本,安装使用react-navigation
vscode.png
第一步,直接从初始化工程开始

1.打开VS Code,菜单选择 –>查看,–>终端

React-Native 6.X版本,安装使用react-navigation
tool

2.ls 一下,查看当前在哪个目录,然后cd 到文件目录下

React-Native 6.X版本,安装使用react-navigation
image.png
  1. react-native init 工程名称

    React-Native 6.X版本,安装使用react-navigation
    image.png

    4.cd 工程名称 ,先跑起来看看喽

npx react-native run-ios

5.当你看到如下的图,就代表默认工程建立完成,那么恭喜你!第一步成功了!!

React-Native 6.X版本,安装使用react-navigation
image.png
第二步,集成并使用react-navigation路由库

我也找过一些资料,讲解怎么集成并使用react-navigation库的,发现多少都有些问题,因为资料并不是最新的,也有可能是这个库也在更新,然后资料并没有更新,所以说,就算你按照资料上,一步步来,然后也跑不起来的,
我的原则是,直接看react-navigation的官方文档,并修改中间的坑,官方网址:https://reactnavigation.org/docs/getting-started/

React-Native 6.X版本,安装使用react-navigation
image.png

1,安装react-navigation
2,安装react-navigation,它所相关的,或者它依赖的库
3,cd到iOS工程目录
4,同步安装到iOS工程里面(pod install这个命令,要注意,是在ios工程下才能使用)
5,cd ..回到React-native工程

React-Native 6.X版本,安装使用react-navigation
image.png

这样我们的路由库就安装完成了。在使用的地方,按照官方文档,使用就可以了

声明:本文内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎发送邮件至:qvyue@qq.com 进行举报,并提供相关证据,工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。