iOS.ReactNative-5-make-react-native-to-support-dynamically-update
基于React Native来实现App的热更新
热更新: 类似Hot-Patching,在程序不发布版本的前提下,对部分功能或者全部功能进行修改或者升级。
JSX
1. JSX简介
1.1 https://jsx.github.io/
1.2 Tutorial: JSX
"JSX is a preprocessor step that adds XML syntax to JavaScript. "
"Just like XML, JSX tags have a tag name, attributes, and children. "
"JSX lets you create JavaScript objects using HTML syntax. " Ref [5]
"JSX is not required to use React." Ref[5]
JSX 官方文档: https://facebook.github.io/react/docs/jsx-in-depth.html
live Babel REPL: 将JSX转换为JavaScript代码的REPL。https://babeljs.io/repl/
JSX gotchas for some key differences. https://facebook.github.io/react/docs/jsx-gotchas.html
http://buildwithreact.com/tutorial/jsx
http://jsbin.com/qucecahako/1/edit?html,css,js,output
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)
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
zhangchongdeMacBook-Pro:react-native XiaoKL$ react-native init HelloWorld
This will walk you through creating a new React Native project in /Users/XiaoKL/Projects/PrivateProject/react-native/HelloWorld
npm WARN engine react-native@0.17.: wanted: {"node":">=4"} (current: {"node":"2.5.0","npm":"2.13.2"}) > bufferutil@1.2. install /Users/XiaoKL/Projects/PrivateProject/react-native/HelloWorld/node_modules/react-native/node_modules/ws/node_modules/bufferutil
> node-gyp rebuild CXX(target) Release/obj.target/bufferutil/src/bufferutil.o
SOLINK_MODULE(target) Release/bufferutil.node > utf--validate@1.2. install /Users/XiaoKL/Projects/PrivateProject/react-native/HelloWorld/node_modules/react-native/node_modules/ws/node_modules/utf--validate
> node-gyp rebuild CXX(target) Release/obj.target/validation/src/validation.o
SOLINK_MODULE(target) Release/validation.node > spawn-sync@1.0. postinstall /Users/XiaoKL/Projects/PrivateProject/react-native/HelloWorld/node_modules/react-native/node_modules/yeoman-generator/node_modules/cross-spawn/node_modules/spawn-sync
> node postinstall > fsevents@1.0. 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
> node-pre-gyp install --fallback-to-build [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
react-native@0.17. node_modules/react-native
├── absolute-path@0.0.
├── graceful-fs@4.1.
├── progress@1.1.
├── stacktrace-parser@0.1.
├── wordwrap@1.0.
├── react-timer-mixin@0.13.
├── event-target-shim@1.1.
├── image-size@0.3.
├── underscore@1.8.
├── semver@5.1.
├── bser@1.0. (node-int64@0.4.)
├── opn@3.0. (object-assign@4.0.)
├── debug@2.2. (ms@0.7.)
├── optimist@0.6. (wordwrap@0.0., minimist@0.0.)
├── source-map@0.4. (amdefine@1.0.)
├── mkdirp@0.5. (minimist@0.0.)
├── promise@7.0. (asap@2.0.)
├── chalk@1.1. (supports-color@2.0., ansi-styles@2.1., escape-string-regexp@1.0., has-ansi@2.0., strip-ansi@3.0.)
├── immutable@3.7.
├── worker-farm@1.3. (xtend@4.0., errno@0.1.)
├── fbjs-haste@0.3.
├── sane@1.3. (fb-watchman@1.6., watch@0.10., minimist@1.2., exec-sh@0.2., walker@1.0., minimatch@0.2.)
├── yargs@3.31. (decamelize@1.1., camelcase@2.0., window-size@0.1., y18n@3.2., string-width@1.0., os-locale@1.4., cliui@3.1.)
├── json5@0.4.
├── art@0.10.
├── node-fetch@1.3. (encoding@0.1.)
├── rebound@0.0.
├── connect@2.30. (cookie@0.1., bytes@2.1., utils-merge@1.0., cookie-signature@1.0., pause@0.1., fresh@0.3., on-headers@1.0., response-time@2.3., content-type@1.0., vhost@3.0., basic-auth-connect@1.0., parseurl@1.3., cookie-parser@1.3., depd@1.0., qs@4.0., connect-timeout@1.6., http-errors@1.3., method-override@2.3., serve-favicon@2.3., finalhandler@0.4., morgan@1.6., express-session@1.11., csurf@1.8., serve-static@1.10., multiparty@3.3., type-is@1.6., errorhandler@1.4., compression@1.5., body-parser@1.13., serve-index@1.7.)
├── regenerator@0.8. (private@0.1., through@2.3., esprima-fb@15001.1001.-dev-harmony-fb, commoner@0.10., recast@0.10., defs@1.1.)
├── uglify-js@2.6. (uglify-to-browserify@1.0., async@0.2., yargs@3.10., source-map@0.5.)
├── ws@0.8. (options@0.0., ultron@1.0., bufferutil@1.2., utf--validate@1.2.)
├── module-deps@3.9. (inherits@2.0., browser-resolve@1.11., through2@1.1., xtend@4.0., defined@1.0., duplexer2@0.0., concat-stream@1.4., parents@1.0., subarg@1.0., readable-stream@1.1., stream-combiner2@1.0., resolve@1.1., JSONStream@1.0., detective@4.3.)
├── jstransform@11.0. (object-assign@2.1., base62@1.1., esprima-fb@15001.1.-dev-harmony-fb, commoner@0.10.)
├── react-haste@0.14.
├── yeoman-environment@1.3. (escape-string-regexp@1.0., log-symbols@1.0., grouped-queue@0.3., text-table@0.2., untildify@2.1., diff@2.2., globby@3.0., mem-fs@1.1., inquirer@0.11., lodash@3.10.)
├── joi@6.10. (topo@1.1., isemail@1.2., hoek@2.16., moment@2.10.)
├── babel-polyfill@6.3. (babel-regenerator-runtime@6.3., babel-runtime@5.8., core-js@1.2.)
├── babel-plugin-syntax-trailing-function-commas@6.3. (babel-runtime@5.8.)
├── babel-plugin-transform-class-properties@6.3. (babel-runtime@5.8.)
├── babel-plugin-transform-es2015-destructuring@6.3. (babel-runtime@5.8.)
├── babel-plugin-transform-es2015-constants@6.1. (babel-runtime@5.8.)
├── babel-plugin-syntax-class-properties@6.3. (babel-runtime@5.8.)
├── babel-plugin-transform-react-jsx@6.3. (babel-helper-builder-react-jsx@6.3., babel-runtime@5.8.)
├── babel-plugin-transform-es2015-for-of@6.3. (babel-runtime@5.8.)
├── babel-plugin-syntax-async-functions@6.3. (babel-runtime@5.8.)
├── babel-plugin-syntax-flow@6.3. (babel-runtime@5.8.)
├── babel-plugin-transform-es2015-arrow-functions@6.3. (babel-runtime@5.8.)
├── babel-plugin-transform-es2015-spread@6.3. (babel-runtime@5.8.)
├── babel-plugin-transform-flow-strip-types@6.3. (babel-runtime@5.8.)
├── babel-plugin-transform-es2015-shorthand-properties@6.3. (babel-runtime@5.8.)
├── babel-plugin-transform-object-rest-spread@6.3. (babel-plugin-syntax-object-rest-spread@6.3., babel-runtime@5.8.)
├── babel-plugin-transform-es2015-parameters@6.3. (babel-helper-get-function-arity@6.3., babel-helper-call-delegate@6.3., babel-template@6.3., babel-traverse@6.3., babel-runtime@5.8.)
├── babel-plugin-transform-es2015-template-literals@6.3. (babel-runtime@5.8.)
├── babel-plugin-external-helpers-@6.3. (babel-runtime@5.8.)
├── babel-plugin-transform-es2015-modules-commonjs@6.3. (babel-plugin-transform-strict-mode@6.3., babel-template@6.3., babel-runtime@5.8.)
├── babel-plugin-transform-react-display-name@6.3. (babel-runtime@5.8.)
├── babel-plugin-transform-object-assign@6.3. (babel-runtime@5.8.)
├── babel-plugin-transform-es2015-block-scoping@6.3. (babel-template@6.3., babel-traverse@6.3., lodash@3.10., babel-runtime@5.8.)
├── babel-plugin-syntax-jsx@6.3. (babel-runtime@5.8.)
├── babel-plugin-transform-es2015-computed-properties@6.3. (babel-template@6.3., babel-helper-define-map@6.3., babel-runtime@5.8.)
├── babel-types@6.3. (to-fast-properties@1.0., esutils@2.0., babel-traverse@6.3., lodash@3.10., babel-runtime@5.8.)
├── babel-plugin-transform-es2015-classes@6.3. (babel-helper-optimise-call-expression@6.3., babel-messages@6.3., babel-helper-replace-supers@6.3., babel-helper-function-name@6.3., babel-template@6.3., babel-helper-define-map@6.3., babel-traverse@6.3., babel-runtime@5.8.)
├── babel-plugin-transform-regenerator@6.3. (private@0.1., babel-traverse@6.3., babel-runtime@5.8.)
├── babylon@6.3. (babel-runtime@5.8.)
├── babel-core@6.3. (slash@1.0., shebang-regex@1.0., path-is-absolute@1.0., path-exists@1.0., babel-template@6.3., babel-messages@6.3., private@0.1., babel-helpers@6.3., convert-source-map@1.1., babel-code-frame@6.3., minimatch@2.0., babel-generator@6.3., babel-traverse@6.3., source-map@0.5., lodash@3.10., babel-register@6.3., babel-runtime@5.8.)
├── yeoman-generator@0.20. (path-is-absolute@1.0., path-exists@1.0., read-chunk@1.0., detect-conflict@1.0., yeoman-welcome@1.0., yeoman-assert@2.1., rimraf@2.4., text-table@0.2., xdg-basedir@2.0., user-home@2.0., mime@1.3., class-extend@0.1., dargs@4.0., istextorbinary@1.0., async@1.5., nopt@3.0., run-async@0.1., shelljs@0.5., glob@5.0., cli-table@0.3., diff@2.2., through2@2.0., underscore.string@3.2., findup-sync@0.2., mem-fs-editor@2.1., dateformat@1.0., github-username@2.1., pretty-bytes@2.0., download@4.4., cross-spawn@2.1., html-wiring@1.2., gruntfile-editor@1.1., sinon@1.17., lodash@3.10., inquirer@0.8.)
└── fbjs-scripts@0.4. (object-assign@4.0., through2@2.0., gulp-util@3.0., core-js@1.2., babel@5.8.)
Setting up new React Native app in /Users/XiaoKL/Projects/PrivateProject/react-native/HelloWorld
To run your app on iOS:
Open /Users/XiaoKL/Projects/PrivateProject/react-native/HelloWorld/ios/HelloWorld.xcodeproj in Xcode
Hit the Run button
To run your app on Android:
Have an Android emulator running (quickest way to get started), or a device connected
cd /Users/XiaoKL/Projects/PrivateProject/react-native/HelloWorld
react-native run-android
zhangchongdeMacBook-Pro:react-native XiaoKL$
react-native init 命令的输出
Q: 如何获得某个版本的React-Native的代码?
A:
B): 创建Podfile
$ pod init
C): 安装React-Native Library
1. 在Podfile中添加以下内容:
# Depending on how your project is organized, your node_modules directory may be
# somewhere else; tell CocoaPods where you've installed react-native from npm
pod 'React', :path => '../node_modules/react-native', :subspecs => [ // A
'Core',
'RCTImage',
'RCTNetwork',
'RCTText',
'RCTWebSocket',
# Add any other subspecs you want to use in your project
]
A: :path 用来将本地的代码通过Pod方式进行安装. :path 的值指定了本地代码相对Podfile的相对路径。例如在Demo中 :path 取值为:
:path => '../HelloWorld/node_modules/react-native'
2. 运行命令 $ pod install
D): 打包js代码
react-native bundle
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
- Using Flexbox Today
- CSS Flexbox Playground
- Flexbox Froggy
- Flexbox Collection
- Flexbox Patterns
- Flexbox Interface Patterns
- Solved With Flexbox
- Flexbox Layouts
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组件的容器。
@interface RCTRootContentView : RCTView <RCTInvalidating> @property (nonatomic, readonly) BOOL contentHasAppeared; - (instancetype)initWithFrame:(CGRect)frame bridge:(RCTBridge *)bridge; @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
iOS.ReactNative-5-make-react-native-to-support-dynamically-update的更多相关文章
- react native 之 在现有的iOS工程中集成react native
在现有的iOS工程中集成react native, 或者说将react native引入到iOS 项目,是RN和iOS混合开发的必经之路 参考官网教程:https://reactnative.cn/d ...
- iOS、swift、React Native学习常用的社区、论坛
<!----iOS> <!----Swift>*IOS开发常用社区:http://code4app.com/ *IOS开发常用社区:http://www.cocoachina. ...
- iOS程序员的React Native开发工具集
本文整理了React Native iOS开发过程中有用的工具.服务.测试.库以及网站等. 工具 你可以选择不同的开发环境:DECO.EXPO或者你可以使用Nuclide+Atom,目前我使用EXPO ...
- iOS原生项目集成React Native模块
今天周末,弄弄Native和React Native之间的交互.首先,先在iOS原生项目中集成React Native模块: 注意事项: 1.因为react native的版本问题,部分细节可能有所不 ...
- [React Native] Writing Platform-Specific Components for iOS and Android in React Native
Learn to write components that render differently on iOS and Android, but present the same API. Firs ...
- React Native之微信分享(iOS Android)
React Native之微信分享(iOS Android) 在使用React Native开发项目的时候,基本都会使用到微信好友或者微信朋友圈分享功能吧,那么今天我就带大家实现以下RN微信好友以及朋 ...
- React Native iOS 离线包
平时使用React Native 时候, js代码和图片资源运行在一个Debug Server上(需要cd 到RN目录,然后终端执行 npm start 命令开启本地服务 ).每次更新代码之后只需要使 ...
- React Native 手工搭建环境 之iOS篇
常识 React native 开发服务器 在开发时,我们的框架是这样的:  当正式发布进入到生产环境时,开发服务器上所有的js文件将会被编译成包的形式,直接嵌入到客户端内.这时,已经不再需要开发服 ...
- React Native创建一个APP
React Native 结合了 Web 应用和 Native 应用的优势,可以使用 JavaScript 来开发 iOS 和 Android 原生应用.在 JavaScript 中用 React 抽 ...
- React Native知识12-与原生交互
一:原生传递参数给React Native 1:原生给React Native传参 原生给JS传数据,主要依靠属性. 通过initialProperties,这个RCTRootView的初始化函数的参 ...
随机推荐
- bash profile .bashrc
/etc/profile:此文件为系统的每个用户设置环境信息,当用户第一次登录时,该文件被执行. 并从/etc/profile.d目录的配置文件中搜集shell的设置. /etc/bashrc:为每一 ...
- Git本地提交到远程指定分支
git push origin master:ziranmeng2.(本地分支:远程分支)
- Ninject之旅之七:Ninject依赖注入
摘要 可以使用不同的模式向消费者类注入依赖项,向构造器里注入依赖项是其中一种.有一些遵循的模式用来注册依赖项,同时有一些需要避免的模式,因为他们经常导致不合乎需要的结果.这篇文章讲述那些跟Ninjec ...
- js类式继承模式学习心得
最近在学习<JavaScript模式>,感觉里面的5种继承模式写的很好,值得和大家分享. 类式继承模式#1--原型继承 方法 让子函数的原型来继承父函数实例出来的对象 <script ...
- begin-end语句块在mysql中的使用问题
在最近在通过navicate连接mysql数据库时,进行查询操作: delimiter $$BEGIN SET @a=1; if (@a > 0) THEN SELECT COUNT(*) fr ...
- java自定义异常(Exception、throws、try-catch)
一.What is ... 异常处理就是容错处理机制.通过构造一个陷阱来捕获运行时的可预见错误,经对该错误进行适当处理后,让程序能继续运行不至于崩溃. 二.Who will ... 异常由系统环境引发 ...
- Java:基于LinkedList实现栈和队列
1.提供一组栈的接口,其底层关联到一个LinkedList(双端队列)实例.由于只暴露部分基于栈实现的接口,所以可以提供安全的栈实现. package junit; import java.util. ...
- 数据结构算法[c语言]
共16章,共四部分:基础知识,数据结构,排序和搜索. 所有的实现都是使用C语言缩写.任何语言都有优缺点,选用C语言是因为它使用的广泛. 第一章: 导论 第二章: 算法分析原理 第三章: 基本数据结构 ...
- eclipse重定向输入输出到文件
最近在学习算法第四版,为了要用作者给的测试数据alg4-data,需要将数据直接导入到程序中.在作者的示例代码里用了重定向来做这个事情,但是在eclipse里使用重定向很不方便,查了很多资料,都说是在 ...
- c#winform窗体嵌入
最近开发项目,错误的理解了需求,自己做了个窗体的嵌套,虽然是错误的理解了,但是功能还是实现了,做下标记,需要时可以拿来看看. 新建两个窗体Form1和Form2,现在需要将Form2显示到Form1里 ...