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

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,


mac.png

vscode.png
第一步,直接从初始化工程开始

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


tool

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


image.png
  1. react-native init 工程名称


    image.png

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

npx react-native run-ios

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


image.png
第二步,集成并使用react-navigation路由库

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

image.png

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

image.png

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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容