React-Native系列之:创建运行Hello World工程

配置好环境之后,就可以开始写个Hello World工程练练手咯。
IDE:WebStorm + Android Studio

第一步:WebStorm新建工程

在WebStorm中:File->New->Project->选择React Native,然后在Location中选择项目存储路径并在末尾添加上项目名字,如下图:



点击Create,然后耐心等待数分钟,程序会自动去npm仓库下载相关依赖包。下载完成后,一个最基本的RN工程就出来了,如下图:


第二步:Android Studio引入工程

接下来,打开Android Studio,准备引入项目:Open an existing Android Studio project->选择刚刚创建的项目的android模块,如下图:



注意,是项目当中的android模块。
引入成功后,就可以开始正式运行RN项目了。

第三步:运行项目

连接手机或打开模拟器。
在Android Studio中点击运行按钮,将该项目安装到手机/模拟器上。安装成功后,并不会显示我们想要的内容,而是会一片红:



原因也很简单,我们只将App安装到手机上,相当于原生代码已经运行了,但是RN代码还没有运行加载进来。接下来,就打包安装RN部分。

第四步:安装RN

切换到WebStorm,打开Terminal,先输入:

adb reverse tcp:8081 tcp:8081

再输入:

npm start

相关命令行和日志输出如下:


如图,显示“Loading dependency graph,done”,就表明服务已经完全启动起来了。然后,点击红色屏幕下的RELOAD,即可开始安装RN的Bundle文件。等到BUNDLE文件安装完成,屏幕显示的也不是我们预期的内容,而是一片白,如下:



这是正常现象,至于为什么,我也不知道。解决办法也很简单,杀掉该进程,重新点击打开App,即可看到我们期盼已久的内容:


可能遇到的问题
  1. 在RELOAD的时候报错:
Unable to resolve module `AccessibilityInfo` from `E:\Coding\ReactNative\Demo\HelloRN\node_modules\react-native\Libraries\react-native\react-native-implementation.js`: Module does not exist in the module map
This might be related to https://github.com/facebook/react-native/issues/4968
To resolve try the following:
  1. Clear watchman watches: `watchman watch-del-all`.
  2. Delete the `node_modules` folder: `rm -rf node_modules && npm install`.
  3. Reset Metro Bundler cache: `rm -rf $TMPDIR/react-*` or `npm start -- --reset-cache`.  4. Remove haste cache: `rm -rf $TMPDIR/haste-map-react-native-packager-*`.

屏幕上显示:



解决方法:react-native版本为0.56.0时会发生此问题,解决办法是将react-native版本降为0.55.4:
修改package.json中react-native版本:

"react-native": "0.55.4"

同时,修改android/app/build.gradle中的react-native的版本:

dependencies {
    compile "com.facebook.react:react-native:0.55.4"  // From node_modules
}

修改完成后,重新执行第三四步

  1. 在RELOAD的时候,报错:
error: bundling failed: Error: Plugin 0 specified in "E:\\Coding\\ReactNative\\Demo\\HelloRN\\node_modules\\babel-preset-react-native\\index.js" provided an invalid property of "default" (While processing
preset: "E:\\Coding\\ReactNative\\Demo\\HelloRN\\node_modules\\babel-preset-react-native\\index.js")

同时,屏幕红屏显示:



解决方法:你仔细看看package.json/dependencies中引入的babel-preset-react-native,是不是如下:

"dependencies": {
    "babel-preset-react-native": "5",
  },

“5”肯定不是babel-preset-react-native的正确版本,所以需要安装正确版本的babel-preset-react-native。删掉该行引用。在Terminal中输入:

npm install babel-preset-react-native

即可正确安装babel-preset-react-native。
安装完成后,即可重新RELOAD。

  1. 在RELOAD的时候,红屏显示:



    解决方法:服务没有启动,两步启动之

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

推荐阅读更多精彩内容