ReactNative搭建入门

准备工作

必须安装的依赖有：Node、Watchman 和 React Native 命令行工具以及 Xcode。

Node, Watchman安装:

brew install node

brew install watchman

（注：brew命令需要安装Homebrew ，其次如果已安装过Node，要求版本在v8.3以上）

然后，设置npm的镜像：

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

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

可选安装：Yarn

Yarn是Facebook替代npm的工具，可以不装，好处嘛，可以加速 node 模块的下载。其他的好像也没什么优点。还是建议安装吧：

npm install -g yarn react-native-cli

安装完以后，同样要设置一下镜像：

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

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

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

前端开发工具：Sublime Text3

RN 主体代码还是js和style，所以有必要选择一个前端开发工具了，SublimeText是首选，当然你还可以选择Vscode, webstorm.

创建一个新项目

react-native init [ProjectName]           //默认会创建最新版本

（注：你可以使用--version参数（注意是两个杠）创建指定版本的项目。例如react-native init MyApp --version 0.44.3。注意版本号必须精确到两个小数点。）

编译并运行 React Native 应用

cd [ProjectName]    //cd到刚刚创建的项目根目录

react-native run-ios 

当然，可以找到项目中的ios目录下面的工程文件，用Xcode直接打开运行。

RN工程整体初步了解

现在你已经成功的运行出来了项目，但是你可能对RN运行过程并不是很清楚，现在就初步了解一下大致过程以及重要的文件。

我们知道RN是将js和style样式打包成jsbundle, 上传的远程服务器，然后客户端（iOS/安卓）将服务器上的文件下载到本地，然后解析，通过客户端的JavaScriptCore框架，实现js代码和原生代码的交互，从而实现原生的功能。

整体的RN项目目录如下：

首先我们先看客户端（已iOS为例）

iOSAPP项目入口：AppDelegate的启动方法：didFinishLaunchingWithOptions：

self.brige = [[RCTBridge alloc] initWithDelegate:self launchOptions:launchOptions];

首先，我们要初始化一个RCTBridge，这个实例至关重要，它是原生OC代码和js互相调用的桥梁，没有它，客户端无法调用RN的js代码。鉴于整个项目中能全局访问到这个实例，我把这个实例作为了Appdelegate的全局属性，以便外部可以随时访问到。

RCTBridge的初始化需要一个委托方法：sourceURLForBridge，该方法必须实现 ，它要求您返回一个NSURL，这个URL也就是您RN的前端代码的地址。本地和远程地址都可以。在调试阶段，由于代码需要实时更新，我们一般采用远程地址，可以实时获取最新的前端代码，以便调试。在发布阶段，前端代码固定了，这时候后我们应该用本地地址，那么我们可以先将远程地址下载到我们客户端工程目录里，通过[NSBundle mainBundle] URLForResource获取前端代码。我的sourceURLForBridge代理方法实现如下：

- (NSURL *)sourceURLForBridge:(RCTBridge *)bridge {

    NSURL *jsCodeLocation;

    //调试开发

    jsCodeLocation = [[RCTBundleURLProvider sharedSettings]       jsBundleURLForBundleRoot:@"index.ios" fallbackResource:nil];

    //打包发布

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

    return jsCodeLocation;

}

(注：index.ios就是上面目录iOS的入口文件名称)

这里顺便附上如何将前端code生产本地jsbundle：

1.第一步，先启动项目server:

cd [projectName] //cd到项目根目录

npm start  //启动server

curl http://localhost:8081/index.ios.bundle -o ios/main.jsbundle

这样我们就生产了main.jsbundle了。

有了bridge后，就可以创建RCTRootView了

RCTRootView *rootView = [[RCTRootView alloc] initWithBridge:self.brige moduleName:@"KevinReactNativeProject" initialProperties:nil];

（注：moduleName就是index.ios.js入口文件里注册的那个名称，具体参见我的工程：）

这样RCTRootView作为一个ViewController的子View可以展示到客户端里了。