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 -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是什么?
[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的更多相关文章
- 一个资深iOS开发者对于React Native的看法
一个资深iOS开发者对于React Native的看法 当我第一次尝试ReactNative的时候,我觉得这只是网页开发者涉足原生移动应用领域的歪门邪道. 我认为一个js开发者可以使用javasc ...
- iOS 写给iOS开发者的React Native学习路线(转)
我是一名iOS开发者,断断续续一年前开始接触React Native,最近由于工作需要,专职学习React Native也有一个多月了.网络上知识资源非常的多,但能让人豁然开朗.迅速学习的还是少数,我 ...
- 写给iOS开发者的React Native学习路线(转)
我是一名iOS开发者,断断续续一年前开始接触React Native,最近由于工作需要,专职学习React Native也有一个多月了.网络上知识资源非常的多,但能让人豁然开朗.迅速学习的还是少数,我 ...
- 现有iOS项目集成React Native过程记录
在<Mac系统下React Native环境搭建>配置了RN的开发环境,然后,本文记录在现有iOS项目集成React Native的过程,官方推荐使用Cocoapods,项目一开始也是使用 ...
- 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 ...
- 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命令行 ...
- [转] 一个资深iOS开发者对于React Native的看法
当我第一次尝试ReactNative的时候,我觉得这只是网页开发者涉足原生移动应用领域的歪门邪道. 我认为一个js开发者可以使用javascript来构建iPhone应用确实是一件很酷的事情,但是我很 ...
- JMeterPluginsCMD Command Line Tool
There is small command-line utility for generating graphs out of JTL files. It behave just like righ ...
- 《React Native 精解与实战》书籍连载「iOS 平台与 React Native 混合开发」
此文是我的出版书籍<React Native 精解与实战>连载分享,此书由机械工业出版社出版,书中详解了 React Native 框架底层原理.React Native 组件布局.组件与 ...
- 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 ...
随机推荐
- PhpStorm中字体大小的改变方法
文件->设置->编辑器->编辑器->鼠标->用Ctrl+鼠标滚轮改变字体大小(缩放)(在前边的复选框里打钩,确定,就可以了)
- EditText----
==============01 editText属性 1.输入法Enter键图标的设置: 软件盘的界面替换只有一个属性android:imeOptions,这个属性的可以取的值有normal,a ...
- mysql 修改字段类型
1.更改Float字段类型to Decimal ALTER TABLE 表名 MODIFY 字段名 decimal(10,2) not null default '0': 如: ALTER TABLE ...
- mysql数据库连接方式(.net)
1.通过ado.net连接(数据库连接串中库名称为中文无法使用) 需要添加MySql.Data.dll(可通过安装mysql-connector-net-6.8.3.mis获得) 引用MySql.Da ...
- (整理)SQLServer_DBA 工具
本文是SQLserver DBA 相关工具使用资料链接整理. SQLServer DBA 十大工具:http://www.cnblogs.com/fygh/archive/2012/04/25/246 ...
- tmp_table_size
Whenever you increase tmp_table_size and max_heap_table_size, keep in mind that setting these does n ...
- hive日期函数
今天select from_unixtime(unix_timestamp(),'yyyy-MM-dd HH:mm:ss') UNIX时间戳转日期函数: from_unixtime 语法: from_ ...
- openStack镜像制作
参考链接: https://www.ibm.com/developerworks/community/wikis/home?lang=en#!/wiki/OpenStack/page/Creating ...
- Python之路【第十六篇】:Django【基础篇】
Python之路[第十六篇]:Django[基础篇] Python的WEB框架有Django.Tornado.Flask 等多种,Django相较与其他WEB框架其优势为:大而全,框架本身集成了O ...
- 浅谈session/cookie
Session 和Cookie是常用的Web跟踪技术.Cookie保存在客户端,而Session则保存在服务器端,二者结合使用来跟踪用户的会话状态,是http协议的一种扩展技术.之所以说是一种扩展技术 ...