React Native世界的"Hello World"

参考React Native 中文网的文档来进行操作

http://reactnative.cn/ 

首先我们不管我们会不会前端知识,我们需要看到一个可以跑起来的程序,让我们在理解它之前先见到它!那么我们开始按照文档来搭建RN的环境。

一.环境需求

1.OS X - 本向导假设您的操作系统是OS X,因为这是开发iOS应用所必须的。

2.推荐使用Homebrew来安装Watchman和Flow

3.安装Node.js4.0或更高版本(译注:如果你并不使用Node.js开发网站,只是用于React Native的开发,那么请先安装homebrew,然后直接使用brew install node安装即可,不必按照下面的nvm的安装步骤)

//如果只是想要ReactNative 不需要做(1)(2);

       (1)安装nvm(安装向导在这里)。然后运行nvm install node && nvm alias default node,这将会默认安装最新版本的Node.js并且设置好命令行的环境变量,这样你可以输入node命令来启动Node.js环境。nvm使你可以可以同时安装多个版本的Node.js,并且在这些版本之间轻松切换。

      (2) 如果你从未接触过npm,推荐阅读npm的文档

4.在命令行中输入brew install watchman,我们推荐安装watchman,否则你可能会遇到一个Node.js监视文件系统的BUG。

5.如果你希望使用flow来为js代码加上类型检查,那么在命令行中输入brew install flow来安装flow。(译注:新手可以跳过这一步)

我们推荐您定期运行brew update && brew upgrade来保持上述几个程序为最新版本。

2.快速开始

//执行时候记得去掉$

$ npm install -g react-native-cli

$ react-native init AwesomeProject

译注:由于众所周知的网络原因,react-native命令行从npm官方源拖代码时会遇上麻烦。请将npm仓库源替换为国内镜像:

npm configsetregistry https://registry.npm.taobao.org

npm configsetdisturl https://npm.taobao.org/dist

另,执行init时切记不要在前面加上sudo(否则新项目的目录所有者会变为root而不是当前用户,导致一系列权限问题,请使用chown修复)。

这个init真的要等很久,我换了姿势也没变快所以大家多等等吧。

init后面就是初始化的文件夹名称 至于这个Awesome是有什么意义并没明白,希望有人能指出.

然后你再你的目录下就可以看到这个叫做AwesomeProject的文件夹了


生成了你的第一个项目文件夹


我们打开这个文件夹可以看到

工程的结构长成这个样子,这是啥子?我们先不去考虑,看能不能跑起来。


RN文件目录


我们进入ios文件夹中(喂iOS可好?)


依然是熟悉的它们

依然是熟悉的它们,习惯性地点开。



大概看一眼目录结构

我们进入AppDelegate.m去看NR做了什么?

我们看到在完成加载的方法中RN这样达到了显示的效果。

NSURL*jsCodeLocation;

/**

* Loading JavaScript code - uncomment the one you want.

*

* OPTION 1

* Load from development server. Start the server from the repository root:

*

* $ npm start

*

* To run on device, change `localhost` to the IP address of your computer

* (you can get this by typing `ifconfig` into the terminal and selecting the

* `inet` value under `en0:`) and make sure your computer and iOS device are

* on the same Wi-Fi network.

*/

jsCodeLocation = [NSURLURLWithString:@"http://localhost:8081/index.ios.bundle?platform=ios&dev=true"];

/**

* OPTION 2

* Load from pre-bundled file on disk. The static bundle is automatically

* generated by "Bundle React Native code and images" build step.

*/

//jsCodeLocation = [[NSBundle mainBundle] URLForResource:@"main" withExtension:@"jsbundle"];

RCTRootView*rootView = [[RCTRootViewalloc]initWithBundleURL:jsCodeLocation

moduleName:@"AwesomeProject"

initialProperties:nil

launchOptions:launchOptions];

self.window= [[UIWindowalloc]initWithFrame:[UIScreenmainScreen].bounds];

UIViewController*rootViewController = [UIViewControllernew];

rootViewController.view= rootView;

self.window.rootViewController= rootViewController;

[self.windowmakeKeyAndVisible];

好我们Run一下程序。(我第一次运行的时候出现提示watchman的error,随手重新运行了一下就好了没记录到错误原因)


我们看到终端为我们打开了一个ReactPackager

这个操作会同时打开一个用于实现动态代码加载的Node服务(React Packager)。所以每当你修改代码,你只需要在模拟器中按下⌘+R,而无需重新在XCode中编译。


模拟器中出现WelcomeToReactNative字样

完成“Hello World”的程序运行,见到RN世界的world,让我们尝试更改内容,再次跑一下。


打开index.ios.js文件进行JS代码的编辑

(这里有朋友推荐IDE使用Sublime来编辑代码,需要的朋友可以去下载下free)


我们看到React.js的代码

更改其中的文本内容为“从零开始学习ReactNative!”

在模拟器界面直接Command + R


完成更改

按下Cmd+D后出现调试菜单,我们在以后会进行了解。


按下Cmd+D后出现调试菜单

完成Hello World 任务。我们开始进入下一阶段的探索。

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

推荐阅读更多精彩内容