RN基础学习

公司要求学习RN,就在网上搜索教程学习了下。
下面是按照步骤一步一步来操作:

一 安装环境

对于iOS来说,必须要安装的依赖环境是Node, Watchman, Xcode , Cocoapods 。
Xcode和Cocoapods安装步骤就不说了。
推荐使用Homebrew来安装 Node 和 Watchman。

按照顺序执行
brew install node
brew install watchman 

(若你安装了node , 检查版本是否在12以上)
安装完node后建议设置npm镜像(淘宝源)

#使用nrm工具切换淘宝源
npx nrm use taobao

#如果之后想换成官方源可使用
npx nrm use npm

[Watchman(https://facebook.github.io/watchman)则是由 Facebook 提供的监视文件系统变更的工具。安装此工具可以提高开发时的性能(packager 可以快速捕捉文件的变化从而实现实时刷新)]

此处是插入知识点:npm是什么 ?

(1)概念:npm是Node Package Manager的缩写,意思是node的包管理器
(2)安装:集成在node.js中,随着Node.js 安装时一起被安装
(3)常见场景:前端框架reactNative, Vue, 后台node开发等
(4)常见命令:
npm -v : 查看版本号
npm install XXX(包名) : 下载安装包
npm install npm -g :更新最新的npm
npm i : 下载依赖库( 会帮助检测与当前node版本最匹配的npm包版本号,并匹配出来相互依赖的npm包应该提升的版本号 )

此处讲下 Yarn

yarn 是Facebook提供的替代npm 的工具,可以加速 node 模块的下载。

npm install  -g yarn

安装完 yarn 之后就可以用 yarn 代替 npm 了,例如用 yarn代替npm install命令,用 yarn add 某第三方库名代替npm install 某第三方库名

二 创建新项目

使用 React Native 内建的命令行工具来创建一个名为"AwesomeProject"的新项目

第一种方法

npx react-native init AwesomeProject

(使用 React Native 内建的命令行工具来创建一个名为"AwesomeProject"的新项目。这个命令行工具不需要安装,可以直接用 node 自带的npx命令来使用(注意 init 命令默认会创建最新的版本))
先到一个目录下,如桌面,创建完之后,文件目录如下:


工程目录.png
Podfile里内容如下:
Podfile内容.png

采用这种方法创建的时候,运行的时候可能会在 CocoaPods 的依赖安装步骤卡很久(命令行停在 Installing CocoaPods dependencies),会提示你采用pod install 安装。在执行pod install的时候,会出现很多错误,如报443(找个网好的多执行几遍就好了)或者fatal: the remote end hung up unexpectedly(去网上找找原因设置下, 如下)

git config --global http.postBuffer 5242880000   
git config --global https.postBuffer 5242880000
git config --global http.lowSpeedLimit 0
git config --global http.lowSpeedTime 99999999
如果都不行,则再去查询下,或者找个网好的多试几遍

pod install执行成功以后,运行工程,跑起来会报错


截屏2021-03-12 上午11.08.25.png

去网上找了原因,设置了下,如下,


截屏2021-03-12 上午11.09.37.png

但是还是不行,请教了小组长,他执行了
需要到工程目录下执行下面这句
npm i   
上句成功后执行
pod install

成功后Podfile文件里就会多了RN的依赖库,工程可以正常跑起来。

但是采用这种方法创建的工程,会出现很多问题,可以采用下面二种方法创建

第二种方法:指定版本

可以使用--version参数(注意是两个杠)创建指定版本的项目。注意版本号必须精确到两个小数点。
先cd到某个目录下,直接执行下面语句,定好工程名字和版本号,就会创建一个新的RN工程。

npx react-native init AwesomeProject --version X.XX.X

我选择的版本是 0.62.0

npx react-native init AwesomeProject --version 0.62.0

第三种方法

可以使用--template来使用一些社区提供的模板,例如带有TypeScript配置的:

npx react-native init AwesomeTSProject --template react-native-template-typescript

创建好工程之后,打开终端,到工程iOS目录下,执行 pod install, 然后在工程主目录下,执行npm i, 下载依赖库, 即可运行起来了。
执行了pod install, 还是跑不起来,看了下使用下面语句,我没试,大家可以试试
npm uninstall -g react-native-cli
npx react-native init AwesomeTSProject --template react-native-template-typescript

四 编译并运行 React Native 应用

我是采用第二种方法创建的工程,可以在Xcode中直接运行,如果没有修改过目录中的任何文件时,在终端命令行输入yarn start命令, 若有任何修改,在终端命令行输入yarn ios命令完成原生部分的编译。
模拟器显示的结果是

截屏2021-03-12 上午11.58.38.png

到此为止,一个新项目就创建好了。

参考链接为:https://www.react-native.cn/docs/environment-setup

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 216,142评论 6 498
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 92,298评论 3 392
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 162,068评论 0 351
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,081评论 1 291
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,099评论 6 388
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,071评论 1 295
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,990评论 3 417
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,832评论 0 273
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,274评论 1 310
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,488评论 2 331
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,649评论 1 347
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,378评论 5 343
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,979评论 3 325
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,625评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,796评论 1 268
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,643评论 2 368
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,545评论 2 352

推荐阅读更多精彩内容