iOS.ReactNative-4-react-native-command-line-tool

 

Command line tool: react-native 

1. react-native 是一个命令行工具

1.1 react-native简介

运行以下命令:

ls -lt `which react-native`

lrwxr-xr-x  1 XiaoKL  admin  45  7 30 18:07 /usr/local/bin/react-native -> ../lib/node_modules/react-native-cli/index.js

进到react-native-cli目录下, 有以下内容:

node_modules
package.json
index.js

这个目录结构需要npm^[1]工具来生成。

react-native 目前支持的命令有: start, bundle, unbundle, new-library, link, android, run-android, upgrade

命令	说明
start	starts the webserver
bundle	builds the javascript bundle for offline use
unbundle	builds javascript as "unbundle" for offline use
new-library	generates a native library bridge
link	Adds a third-party library to your project. Example: react-native link awesome-camera
android	generates an Android project for your app
run-android	builds your app and starts it on a connected Android emulator or device
upgrade	upgrade your app's template files to the latest version; run this after updating the react-native version in your package.json and running npm install

Q: react-native 的完整的手册或者man page在哪里?

A: 

react-native是node文件，例如react-native文件开头如下:

#!/usr/bin/env node

var fs = require('fs');
var path = require('path');
var spawn = require('child_process').spawn;
var prompt = require("prompt");

1.2 解析index.js

[Todo] 

2. react-native based app 是如何运行的呢?

Ref[2] "React Native architecture explained" Section

2.1 server 'http://localhost:8081' 是如何运行起来的?

react-native based project同时也是iOS project。在模拟器中，点击"Run"(Command+R)时，Xcode会编译其所依赖的subproject。

如下图依赖的subproject有: React, RCTActionSheet 等。

在subproject React中的build phase中有一个Run Script:

if nc -w 5 -z localhost 8081 ; then
  if ! curl -s "http://localhost:8081/status" | grep -q "packager-status:running" ; then
    echo "Port 8081 already in use, packager is either not running or not running correctly"
    exit 2
  fi
else
  open $SRCROOT/../packager/launchPackager.command || echo "Can't start packager automatically"
fi

关注的重点在line7, 其中 launchPackager.command的代码如下：

#!/usr/bin/env bash

# Copyright (c) 2015-present, Facebook, Inc.
# All rights reserved.
#
# This source code is licensed under the BSD-style license found in the
# LICENSE file in the root directory of this source tree. An additional grant
# of patent rights can be found in the PATENTS file in the same directory.

# Set terminal title
echo -en "33]0;React Packagera"
clear

THIS_DIR=$(dirname "$0")
$THIS_DIR/packager.sh
echo "Process terminated. Press <enter> to close the window"
read

最后的落脚点 line 15， 脚本packager.sh。

2.2 packager.sh script

packager.sh 调用Node.js^[2]脚本，最终工作由packager.js来完成。

if [ $REACT_PACKAGER_LOG ];
then
  echo "Logs will be redirected to $REACT_PACKAGER_LOG"
  exec &> $REACT_PACKAGER_LOG
fi

ulimit -n 4096

THIS_DIR=$(dirname "$0")
node "$THIS_DIR/packager.js" "$@"

2.3 packager.js 

packager.js完成的工作有: 

在packager.js中有以下代码

var chalk = require('chalk');
var connect = require('connect');
var ReactPackager = require('./react-packager');
var blacklist = require('./blacklist.js');
var checkNodeVersion = require('./checkNodeVersion');
var formatBanner = require('./formatBanner');
var launchEditor = require('./launchEditor.js');
var parseCommandLine = require('./parseCommandLine.js');
var webSocketProxy = require('./webSocketProxy.js');

line 3: 加载react-packager模块，该模块是以目录的形式出现的。require^[3]加载react-packager模块。

自然我们来查看 react-packager模块, 即目录 react-packager ：

由require的说明得知，require('./react-packager')导致模块react-packager/index.js的加载。

require('babel-core/register')({  // A
  only: /react-packager/src/
});

// ...
var Activity = require('./src/Activity'); // B
var Server = require('./src/Server'); // C
// D
exports.middleware = ...
exports.buildPackage = ...
exports.buildPackageFromUrl = ...
exports.getDependencies = ... 

A): 　　 

X. Code in React-Native  

var React = require('react-native');

react-native.js 的路径是: ${PROJECT_ROOT}/node_modules/Libraries/react-native/react-native.js 

---

^[1]npm是什么?

Javascript.npm

^[2]Node.js

^[3]关于require的解释，参考了<<深入浅出node js>> 中的"2.2.2路径分析和文件定位"

---

Reference

1. Beginning Mobile App Development with React Native  (AAAAA) 

http://beginning-mobile-app-development-with-react-native.com/book-preview.html

这是某本书的预览。

2. npm

3. require [CommonJS]

http://www.commonjs.org/specs/modules/1.0/

http://wiki.commonjs.org/wiki/Modules/1.1