React Native环境搭建

接触RN(英文)起始RN(中文)

我第一次参考了英文文档,采坑无数。。。所以最好还是参考中文文档吧

硬件要求:

Mac电脑

软件要求

  1. Xcode(9.4及以上)
  2. HomeBlew(操作系统上的一个安装包管理器,可以方便后续安装包的安装)
    安装过程中需要输入密码,还需要下载,等待一会即可
    终端命令
/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
  1. Node(8.3及以上)、Watchman
    Watchman是Facebook用于观察文件系统变化的工具,安装可获得更好的性能。
    安装HomeBlew之后执行以下命令
brew install node
brew install watchman

安装完成之后建议设置npm镜像以加速后面的过程
在终端输入以下命令

npm config set registry https://registry.npm.taobao.org --global
npm config set disturl https://npm.taobao.org/dist --global
  1. Yarn、React Native CLI(RN的命令行工具)
    用来开发RN的命令行工具
    安装命令
npm install -g yarn react-native-cli

yarn安装完成后也要设置镜像资源

yarn config set registry https://registry.npm.taobao.org --global
yarn config set disturl https://npm.taobao.org/dist --global

然后就可以愉快地耍大刀咯

创建项目

Hello world程序员之始,那么我们就使用React Native命令行界面创建第一个RN项目,名称为:HelloWorld
终端命令

react-native init HelloWorld

稍微等一会即可创建完成,默认创建的项目位置为终端所指目录

项目结构

运行项目

在React Native项目文件夹中运行react-native run-ios:,然后就可以看到新应用在iOS模拟器中运行了
终端命令

cd HelloWorld  // 切换目录到HelloWorld项目中
react-native run-ios

react-native run-ios只是运行应用程序的一种方式,当然我们也可以使用Xcode/Nuclide运行项目

坑来了

坑一

运行HelloWorld项目报错,错误如下

** BUILD FAILED **


The following commands produced analyzer issues:
    Analyze Base/RCTModuleMethod.mm

    Analyze Modules/RCTUIManager.m
(2 commands with analyzer issues)

The following build commands failed:
    CompileC /Users/zhaohaiming/HelloWorld/ios/build/Build/Intermediates.noindex/RCTLinking.build/Debug-iphonesimulator/RCTLinking.build/Objects-normal/x86_64/RCTLinkingManager.o RCTLinkingManager.m normal x86_64 objective-c com.apple.compilers.llvm.clang.1_0.compiler
(1 failure)

Installing build/Build/Products/Debug-iphonesimulator/HelloWorld.app
An error was encountered processing the command (domain=NSPOSIXErrorDomain, code=2):
Failed to install the requested application
An application bundle was not found at the provided path.
Provide a valid path to the desired application bundle.
Print: Entry, ":CFBundleIdentifier", Does Not Exist

Command failed: /usr/libexec/PlistBuddy -c Print:CFBundleIdentifier build/Build/Products/Debug-iphonesimulator/HelloWorld.app/Info.plist
Print: Entry, ":CFBundleIdentifier", Does Not Exist


Error: Command failed: /usr/libexec/PlistBuddy -c Print:CFBundleIdentifier build/Build/Products/Debug-iphonesimulator/HelloWorld.app/Info.plist
Print: Entry, ":CFBundleIdentifier", Does Not Exist

    at checkExecSyncError (child_process.js:611:11)
    at Object.execFileSync (child_process.js:629:13)
    at Promise.then (/Users/zhaohaiming/HelloWorld/node_modules/react-native/local-cli/runIOS/runIOS.js:208:5)

试了很多方法都不行,最终采用降低版本的方法,结果提示BUILD SUCCESSED
具体方法:

方法一(不降级):

参考这里
不过我按照上述方法试了也是没有用

方法二(降级):

先贴出我的环境(降级后的)

node:10.10.0
react:16.3.0-alpha.1
react-native:0.54.3
Xcode:9.2

  1. 打开项目中的package.json文件,修改"dependencies"字典中的值如下:
"dependencies": {
    "react": "16.3.0-alpha.1",
    "react-native": "0.54.3"
  }
  1. 执行命令react-native upgrade进行降级,终端会有提示,是否要降级,回复y然后回车,重复此操作直至提示Successfully upgraded this project to react-native v0.54.3即可
  2. 这时候即可执行命令react-native run-ios编译项目,编译过程中会自动调起模拟器,自动打开命令行工具,最终效果如下:
成功填坑

另外附一个友情链接,这里列出了很多运行红屏错误以及其他的错误,希望能够帮助到有需要的人
React Native开发错误警告处理总结(已解决 !持续更新)

友情链接:React-Native学习指南 资源列表

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

推荐阅读更多精彩内容