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

时间：2022-02-03 21:30:15

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 等。

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

在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 ：

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

由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

相关文章