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  -z localhost  ; 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
fi
else
open $SRCROOT/../packager/launchPackager.command || echo "Can't start packager automatically"
fi

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

 #!/usr/bin/env bash

 # Copyright (c) -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 "\033]0;React Packager\a"
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 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

iOS.ReactNative-4-react-native-command-line-tool的更多相关文章

  1. 一个资深iOS开发者对于React Native的看法

    一个资深iOS开发者对于React Native的看法 当我第一次尝试ReactNative的时候,我觉得这只是网页开发者涉足原生移动应用领域的歪门邪道.   我认为一个js开发者可以使用javasc ...

  2. iOS 写给iOS开发者的React Native学习路线(转)

    我是一名iOS开发者,断断续续一年前开始接触React Native,最近由于工作需要,专职学习React Native也有一个多月了.网络上知识资源非常的多,但能让人豁然开朗.迅速学习的还是少数,我 ...

  3. 写给iOS开发者的React Native学习路线(转)

    我是一名iOS开发者,断断续续一年前开始接触React Native,最近由于工作需要,专职学习React Native也有一个多月了.网络上知识资源非常的多,但能让人豁然开朗.迅速学习的还是少数,我 ...

  4. 现有iOS项目集成React Native过程记录

    在<Mac系统下React Native环境搭建>配置了RN的开发环境,然后,本文记录在现有iOS项目集成React Native的过程,官方推荐使用Cocoapods,项目一开始也是使用 ...

  5. How to Use Android ADB Command Line Tool

    Android Debug Bridge (adb) is a tool that lets you manage the state of an emulator instance or Andro ...

  6. Cordova 3.0 Plugin 安装 及"git" command line tool is not installed

    根据http://docs.phonegap.com/en/edge/guide_cli_index.md.html#The%20Command-line%20Interface Windows命令行 ...

  7. [转] 一个资深iOS开发者对于React Native的看法

    当我第一次尝试ReactNative的时候,我觉得这只是网页开发者涉足原生移动应用领域的歪门邪道. 我认为一个js开发者可以使用javascript来构建iPhone应用确实是一件很酷的事情,但是我很 ...

  8. JMeterPluginsCMD Command Line Tool

    There is small command-line utility for generating graphs out of JTL files. It behave just like righ ...

  9. 《React Native 精解与实战》书籍连载「iOS 平台与 React Native 混合开发」

    此文是我的出版书籍<React Native 精解与实战>连载分享,此书由机械工业出版社出版,书中详解了 React Native 框架底层原理.React Native 组件布局.组件与 ...

  10. Cookies with curl the command line tool

    w https://curl.haxx.se/docs/http-cookies.html curl has a full cookie "engine" built in. If ...

随机推荐

  1. PhpStorm中字体大小的改变方法

    文件->设置->编辑器->编辑器->鼠标->用Ctrl+鼠标滚轮改变字体大小(缩放)(在前边的复选框里打钩,确定,就可以了)

  2. EditText----

    ==============01   editText属性 1.输入法Enter键图标的设置: 软件盘的界面替换只有一个属性android:imeOptions,这个属性的可以取的值有normal,a ...

  3. mysql 修改字段类型

    1.更改Float字段类型to Decimal ALTER TABLE 表名 MODIFY 字段名 decimal(10,2) not null default '0': 如: ALTER TABLE ...

  4. mysql数据库连接方式(.net)

    1.通过ado.net连接(数据库连接串中库名称为中文无法使用) 需要添加MySql.Data.dll(可通过安装mysql-connector-net-6.8.3.mis获得) 引用MySql.Da ...

  5. (整理)SQLServer_DBA 工具

    本文是SQLserver DBA 相关工具使用资料链接整理. SQLServer DBA 十大工具:http://www.cnblogs.com/fygh/archive/2012/04/25/246 ...

  6. tmp_table_size

    Whenever you increase tmp_table_size and max_heap_table_size, keep in mind that setting these does n ...

  7. hive日期函数

    今天select from_unixtime(unix_timestamp(),'yyyy-MM-dd HH:mm:ss') UNIX时间戳转日期函数: from_unixtime 语法: from_ ...

  8. openStack镜像制作

    参考链接: https://www.ibm.com/developerworks/community/wikis/home?lang=en#!/wiki/OpenStack/page/Creating ...

  9. Python之路【第十六篇】:Django【基础篇】

    Python之路[第十六篇]:Django[基础篇]   Python的WEB框架有Django.Tornado.Flask 等多种,Django相较与其他WEB框架其优势为:大而全,框架本身集成了O ...

  10. 浅谈session/cookie

    Session 和Cookie是常用的Web跟踪技术.Cookie保存在客户端,而Session则保存在服务器端,二者结合使用来跟踪用户的会话状态,是http协议的一种扩展技术.之所以说是一种扩展技术 ...