iOS.ReactNative-5-make-react-native-to-support-dynamically-update

時間 2019-11-11

標籤 ios.reactnative ios reactnative make react native support dynamically update 欄目 iOS 简体版

原文原文鏈接

基於React Native來實現App的熱更新

熱更新: 相似Hot-Patching，在程序不發佈版本的前提下，對部分功能或者所有功能進行修改或者升級。javascript

JSX

1. JSX簡介

1.1 https://jsx.github.io/

1.2 Tutorial: JSX

"JSX is a preprocessor step that adds XML syntax to JavaScript. "css

"Just like XML, JSX tags have a tag name, attributes, and children. "html

"JSX lets you create JavaScript objects using HTML syntax. " Ref [5]前端

"JSX is not required to use React." Ref[5]java

JSX 官方文檔: https://facebook.github.io/react/docs/jsx-in-depth.htmlnode

live Babel REPL: 將JSX轉換爲JavaScript代碼的REPL。https://babeljs.io/repl/react

JSX gotchas for some key differences. https://facebook.github.io/react/docs/jsx-gotchas.htmlandroid

http://buildwithreact.com/tutorial/jsxwebpack

http://jsbin.com/qucecahako/1/edit?html,css,js,outputios

1.3 JSX in Depth

JSX is a JavaScript syntax extension that looks similar to XML.

https://facebook.github.io/react/docs/jsx-in-depth.html

能夠用Babel將JSX轉換爲JavaScript。

1.4 JSX 規範

https://facebook.github.io/jsx/

React Native

1. React Getting Started

https://facebook.github.io/react/docs/getting-started.html

CommonJS module system like browserify or webpack

2. 在已存在的App中集成React Native

2.1 So You Want To Dynamically Update Your React Native App

https://medium.com/ios-os-x-development/so-you-want-to-dynamically-update-your-react-native-app-d1d88bf11ede#.84rxp1l62 (Read Again)

DiffMatchPatch

2.2 Integrating with Existing Apps

https://facebook.github.io/react-native/docs/embedded-app-ios.html#content

https://discuss.reactjs.org/t/a-collection-of-examples-for-using-react-native-in-an-existing-ios-app/1954

https://github.com/dsibiski/react-native-embedded-app-example

https://github.com/tjwudi/EmbededReactNativeExample

A): 準備先決條件

1. Install your copy of React Native under your node_modules directory where your JS resides.

FQA

Q: 如何獲取React Native?

A: 參考 iOS.ReactNative-1-introduction 中的 "2.2 建立、運行React Native工程"

react-native init HelloWorld

  1 zhangchongdeMacBook-Pro:react-native XiaoKL$ react-native init HelloWorld
  2 This will walk you through creating a new React Native project in /Users/XiaoKL/Projects/PrivateProject/react-native/HelloWorld
  3 npm WARN engine react-native@0.17.0: wanted: {"node":">=4"} (current: {"node":"2.5.0","npm":"2.13.2"})
  4  
  5 > bufferutil@1.2.1 install /Users/XiaoKL/Projects/PrivateProject/react-native/HelloWorld/node_modules/react-native/node_modules/ws/node_modules/bufferutil
  6 > node-gyp rebuild
  7 
  8   CXX(target) Release/obj.target/bufferutil/src/bufferutil.o
  9   SOLINK_MODULE(target) Release/bufferutil.node
 10  
 11 > utf-8-validate@1.2.1 install /Users/XiaoKL/Projects/PrivateProject/react-native/HelloWorld/node_modules/react-native/node_modules/ws/node_modules/utf-8-validate
 12 > node-gyp rebuild
 13 
 14   CXX(target) Release/obj.target/validation/src/validation.o
 15   SOLINK_MODULE(target) Release/validation.node
 16  
 17 > spawn-sync@1.0.13 postinstall /Users/XiaoKL/Projects/PrivateProject/react-native/HelloWorld/node_modules/react-native/node_modules/yeoman-generator/node_modules/cross-spawn/node_modules/spawn-sync
 18 > node postinstall
 19 
 20  
 21 > fsevents@1.0.6 install /Users/XiaoKL/Projects/PrivateProject/react-native/HelloWorld/node_modules/react-native/node_modules/fbjs-scripts/node_modules/babel/node_modules/chokidar/node_modules/fsevents
 22 > node-pre-gyp install --fallback-to-build
 23 
 24 [fsevents] Success: "/Users/XiaoKL/Projects/PrivateProject/react-native/HelloWorld/node_modules/react-native/node_modules/fbjs-scripts/node_modules/babel/node_modules/chokidar/node_modules/fsevents/lib/binding/Release/node-v44-darwin-x64/fse.node" is installed via remote
 25 react-native@0.17.0 node_modules/react-native
 26 ├── absolute-path@0.0.0
 27 ├── graceful-fs@4.1.2
 28 ├── progress@1.1.8
 29 ├── stacktrace-parser@0.1.3
 30 ├── wordwrap@1.0.0
 31 ├── react-timer-mixin@0.13.3
 32 ├── event-target-shim@1.1.1
 33 ├── image-size@0.3.5
 34 ├── underscore@1.8.3
 35 ├── semver@5.1.0
 36 ├── bser@1.0.2 (node-int64@0.4.0)
 37 ├── opn@3.0.3 (object-assign@4.0.1)
 38 ├── debug@2.2.0 (ms@0.7.1)
 39 ├── optimist@0.6.1 (wordwrap@0.0.3, minimist@0.0.10)
 40 ├── source-map@0.4.4 (amdefine@1.0.0)
 41 ├── mkdirp@0.5.1 (minimist@0.0.8)
 42 ├── promise@7.0.4 (asap@2.0.3)
 43 ├── chalk@1.1.1 (supports-color@2.0.0, ansi-styles@2.1.0, escape-string-regexp@1.0.4, has-ansi@2.0.0, strip-ansi@3.0.0)
 44 ├── immutable@3.7.6
 45 ├── worker-farm@1.3.1 (xtend@4.0.1, errno@0.1.4)
 46 ├── fbjs-haste@0.3.4
 47 ├── sane@1.3.0 (fb-watchman@1.6.0, watch@0.10.0, minimist@1.2.0, exec-sh@0.2.0, walker@1.0.7, minimatch@0.2.14)
 48 ├── yargs@3.31.0 (decamelize@1.1.1, camelcase@2.0.1, window-size@0.1.4, y18n@3.2.0, string-width@1.0.1, os-locale@1.4.0, cliui@3.1.0)
 49 ├── json5@0.4.0
 50 ├── art@0.10.0
 51 ├── node-fetch@1.3.3 (encoding@0.1.11)
 52 ├── rebound@0.0.13
 53 ├── connect@2.30.2 (cookie@0.1.3, bytes@2.1.0, utils-merge@1.0.0, cookie-signature@1.0.6, pause@0.1.0, fresh@0.3.0, on-headers@1.0.1, response-time@2.3.1, content-type@1.0.1, vhost@3.0.2, basic-auth-connect@1.0.0, parseurl@1.3.0, cookie-parser@1.3.5, depd@1.0.1, qs@4.0.0, connect-timeout@1.6.2, http-errors@1.3.1, method-override@2.3.5, serve-favicon@2.3.0, finalhandler@0.4.0, morgan@1.6.1, express-session@1.11.3, csurf@1.8.3, serve-static@1.10.0, multiparty@3.3.2, type-is@1.6.10, errorhandler@1.4.2, compression@1.5.2, body-parser@1.13.3, serve-index@1.7.2)
 54 ├── regenerator@0.8.42 (private@0.1.6, through@2.3.8, esprima-fb@15001.1001.0-dev-harmony-fb, commoner@0.10.4, recast@0.10.33, defs@1.1.1)
 55 ├── uglify-js@2.6.1 (uglify-to-browserify@1.0.2, async@0.2.10, yargs@3.10.0, source-map@0.5.3)
 56 ├── ws@0.8.1 (options@0.0.6, ultron@1.0.2, bufferutil@1.2.1, utf-8-validate@1.2.1)
 57 ├── module-deps@3.9.1 (inherits@2.0.1, browser-resolve@1.11.0, through2@1.1.1, xtend@4.0.1, defined@1.0.0, duplexer2@0.0.2, concat-stream@1.4.10, parents@1.0.1, subarg@1.0.0, readable-stream@1.1.13, stream-combiner2@1.0.2, resolve@1.1.6, JSONStream@1.0.7, detective@4.3.1)
 58 ├── jstransform@11.0.3 (object-assign@2.1.1, base62@1.1.0, esprima-fb@15001.1.0-dev-harmony-fb, commoner@0.10.4)
 59 ├── react-haste@0.14.2
 60 ├── yeoman-environment@1.3.0 (escape-string-regexp@1.0.4, log-symbols@1.0.2, grouped-queue@0.3.2, text-table@0.2.0, untildify@2.1.0, diff@2.2.1, globby@3.0.1, mem-fs@1.1.2, inquirer@0.11.0, lodash@3.10.1)
 61 ├── joi@6.10.1 (topo@1.1.0, isemail@1.2.0, hoek@2.16.3, moment@2.10.6)
 62 ├── babel-polyfill@6.3.14 (babel-regenerator-runtime@6.3.13, babel-runtime@5.8.34, core-js@1.2.6)
 63 ├── babel-plugin-syntax-trailing-function-commas@6.3.13 (babel-runtime@5.8.34)
 64 ├── babel-plugin-transform-class-properties@6.3.13 (babel-runtime@5.8.34)
 65 ├── babel-plugin-transform-es2015-destructuring@6.3.15 (babel-runtime@5.8.34)
 66 ├── babel-plugin-transform-es2015-constants@6.1.4 (babel-runtime@5.8.34)
 67 ├── babel-plugin-syntax-class-properties@6.3.13 (babel-runtime@5.8.34)
 68 ├── babel-plugin-transform-react-jsx@6.3.13 (babel-helper-builder-react-jsx@6.3.13, babel-runtime@5.8.34)
 69 ├── babel-plugin-transform-es2015-for-of@6.3.13 (babel-runtime@5.8.34)
 70 ├── babel-plugin-syntax-async-functions@6.3.13 (babel-runtime@5.8.34)
 71 ├── babel-plugin-syntax-flow@6.3.13 (babel-runtime@5.8.34)
 72 ├── babel-plugin-transform-es2015-arrow-functions@6.3.13 (babel-runtime@5.8.34)
 73 ├── babel-plugin-transform-es2015-spread@6.3.14 (babel-runtime@5.8.34)
 74 ├── babel-plugin-transform-flow-strip-types@6.3.15 (babel-runtime@5.8.34)
 75 ├── babel-plugin-transform-es2015-shorthand-properties@6.3.13 (babel-runtime@5.8.34)
 76 ├── babel-plugin-transform-object-rest-spread@6.3.13 (babel-plugin-syntax-object-rest-spread@6.3.13, babel-runtime@5.8.34)
 77 ├── babel-plugin-transform-es2015-parameters@6.3.21 (babel-helper-get-function-arity@6.3.13, babel-helper-call-delegate@6.3.13, babel-template@6.3.13, babel-traverse@6.3.24, babel-runtime@5.8.34)
 78 ├── babel-plugin-transform-es2015-template-literals@6.3.13 (babel-runtime@5.8.34)
 79 ├── babel-plugin-external-helpers-2@6.3.13 (babel-runtime@5.8.34)
 80 ├── babel-plugin-transform-es2015-modules-commonjs@6.3.16 (babel-plugin-transform-strict-mode@6.3.13, babel-template@6.3.13, babel-runtime@5.8.34)
 81 ├── babel-plugin-transform-react-display-name@6.3.13 (babel-runtime@5.8.34)
 82 ├── babel-plugin-transform-object-assign@6.3.13 (babel-runtime@5.8.34)
 83 ├── babel-plugin-transform-es2015-block-scoping@6.3.13 (babel-template@6.3.13, babel-traverse@6.3.24, lodash@3.10.1, babel-runtime@5.8.34)
 84 ├── babel-plugin-syntax-jsx@6.3.13 (babel-runtime@5.8.34)
 85 ├── babel-plugin-transform-es2015-computed-properties@6.3.13 (babel-template@6.3.13, babel-helper-define-map@6.3.13, babel-runtime@5.8.34)
 86 ├── babel-types@6.3.24 (to-fast-properties@1.0.1, esutils@2.0.2, babel-traverse@6.3.24, lodash@3.10.1, babel-runtime@5.8.34)
 87 ├── babel-plugin-transform-es2015-classes@6.3.15 (babel-helper-optimise-call-expression@6.3.13, babel-messages@6.3.18, babel-helper-replace-supers@6.3.13, babel-helper-function-name@6.3.15, babel-template@6.3.13, babel-helper-define-map@6.3.13, babel-traverse@6.3.24, babel-runtime@5.8.34)
 88 ├── babel-plugin-transform-regenerator@6.3.18 (private@0.1.6, babel-traverse@6.3.24, babel-runtime@5.8.34)
 89 ├── babylon@6.3.21 (babel-runtime@5.8.34)
 90 ├── babel-core@6.3.21 (slash@1.0.0, shebang-regex@1.0.0, path-is-absolute@1.0.0, path-exists@1.0.0, babel-template@6.3.13, babel-messages@6.3.18, private@0.1.6, babel-helpers@6.3.13, convert-source-map@1.1.2, babel-code-frame@6.3.13, minimatch@2.0.10, babel-generator@6.3.21, babel-traverse@6.3.24, source-map@0.5.3, lodash@3.10.1, babel-register@6.3.13, babel-runtime@5.8.34)
 91 ├── yeoman-generator@0.20.3 (path-is-absolute@1.0.0, path-exists@1.0.0, read-chunk@1.0.1, detect-conflict@1.0.0, yeoman-welcome@1.0.1, yeoman-assert@2.1.1, rimraf@2.4.4, text-table@0.2.0, xdg-basedir@2.0.0, user-home@2.0.0, mime@1.3.4, class-extend@0.1.2, dargs@4.0.1, istextorbinary@1.0.2, async@1.5.0, nopt@3.0.6, run-async@0.1.0, shelljs@0.5.3, glob@5.0.15, cli-table@0.3.1, diff@2.2.1, through2@2.0.0, underscore.string@3.2.2, findup-sync@0.2.1, mem-fs-editor@2.1.0, dateformat@1.0.12, github-username@2.1.0, pretty-bytes@2.0.1, download@4.4.3, cross-spawn@2.1.0, html-wiring@1.2.0, gruntfile-editor@1.1.0, sinon@1.17.2, lodash@3.10.1, inquirer@0.8.5)
 92 └── fbjs-scripts@0.4.0 (object-assign@4.0.1, through2@2.0.0, gulp-util@3.0.7, core-js@1.2.6, babel@5.8.34)
 93 Setting up new React Native app in /Users/XiaoKL/Projects/PrivateProject/react-native/HelloWorld
 94 To run your app on iOS:
 95    Open /Users/XiaoKL/Projects/PrivateProject/react-native/HelloWorld/ios/HelloWorld.xcodeproj in Xcode
 96    Hit the Run button
 97 To run your app on Android:
 98    Have an Android emulator running (quickest way to get started), or a device connected
 99    cd /Users/XiaoKL/Projects/PrivateProject/react-native/HelloWorld
100    react-native run-android
101 zhangchongdeMacBook-Pro:react-native XiaoKL$

react-native init 命令的輸出

Q: 如何得到某個版本的React-Native的代碼？

B): 建立Podfile

$ pod init

C): 安裝React-Native Library

1. 在Podfile中添加如下內容:

 1 # Depending on how your project is organized, your node_modules directory may be
 2 # somewhere else; tell CocoaPods where you've installed react-native from npm
 3 pod 'React', :path => '../node_modules/react-native', :subspecs => [  // A  4   'Core',
 5   'RCTImage',
 6   'RCTNetwork',
 7   'RCTText',
 8   'RCTWebSocket',
 9   # Add any other subspecs you want to use in your project
10 ]

A: :path 用來將本地的代碼經過Pod方式進行安裝. :path 的值指定了本地代碼相對Podfile的相對路徑。例如在Demo中 :path 取值爲:

:path => '../HelloWorld/node_modules/react-native'

2. 運行命令 $ pod install

D): 打包js代碼

react-native bundle

1 react-native bundle --entry-file index.ios.js --platform ios --bundle-output EmbededReactNative.jsbundle

react-native bundle 命令說明 [TODO]

Flexbox

Flexbox: React Native’s way of doing UI layout.

1. How To Get Started With CSS Flexbox (AAAA+)

http://www.paulund.co.uk/css-flexbox

2. A Complete Guide to Flexbox (AAAA)

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Node

1. node 簡介和發展歷程

ls -lt `which node`

lrwxr-xr-x 1 XiaoKL staff 4 7 28 23:49 /Users/XiaoKL/.nvm/versions/io.js/v2.5.0/bin/node -> iojs

2. 安裝和升級Node

Installing node.js on OSX 10.11 El Capitan

http://coolestguidesontheplanet.com/installing-node-js-on-osx-10-10-yosemite/

How to Install Node.js and NPM on a Mac (Brew版本)

http://blog.teamtreehouse.com/install-node-js-npm-mac

brew安裝Node.js存在的問題

https://www.reddit.com/r/node/comments/3kkcpu/is_anyone_able_to_brew_upgrade_node_to_400/

Switch Node.js versions with the Node Version Manager (nvm)

http://michael-kuehnel.de/node.js/2015/09/08/using-vm-to-switch-node-versions.html

2.1 nvm

nvm: Node Version Manager - Simple bash script to manage multiple active node.js versions

關於nvm參考 Nodejs.nvm

NPM

1. NPM簡介

javascript package manager

NPM: Node Package Manager

"npm is the package manager for the Node JavaScript platform. It puts modules in

place so that node can find them, and manages dependency conflicts intelligently."

man npm

RCTRootView & RCTView

1. RCTRootView

Native Code(Objective-C Code)和React Native間的接口由RCTRootView暴露出來。

RCTRootView中只包含RCTRootContentView對象，該對象是實際的React Native組件的容器。

1 @interface RCTRootContentView : RCTView <RCTInvalidating>
2 
3 @property (nonatomic, readonly) BOOL contentHasAppeared;
4 
5 - (instancetype)initWithFrame:(CGRect)frame bridge:(RCTBridge *)bridge;
6 
7 @end

2. RCTView

RCTView是ReactNative中UI容器組件(能夠包含其它UI對象的組件)的父類，其直接子類包含:

RCTTextView RCTScrollView RCTRootContentView RCTWebView

TODO: UML圖

3. RCTViewNodeProtocol

RCTViewNodeProtocol: Logical node in a tree of application components.

4. RCTBridge

Reference

1. A Dynamic, Crazy, Native Mobile Future—Powered by JavaScript

https://medium.com/@clayallsopp/a-dynamic-crazy-native-mobile-future-powered-by-javascript-70f2d56b1987#.5853ux96p

2. AppHub – Update React Native Apps Without Re-Submitting to Apple

https://news.ycombinator.com/item?id=10048072

3. An iOS Developer on React Native

https://medium.com/ios-os-x-development/an-ios-developer-on-react-native-1f24786c29f0#.uz3t35nfi

從iOS開發者的角度過分到React Native

4. 阿里的weex

4.1 如何看待阿里無線前端發佈的Weex?

http://www.zhihu.com/question/37636296

4.2 對無線電商動態化方案的思考（二）

https://github.com/amfe/article/issues/14

5. Displaying Data

https://facebook.github.io/react/docs/displaying-data.html

6. react-native (AAAA)

https://github.com/facebook/react-native

7. awesome-react-native (AAAA)

https://github.com/jondot/awesome-react-native

更多相關文章...

相關標籤/搜索

React

iOS

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。