Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
ReactNative 探索之路
Search
David Zhang
September 02, 2016
Programming
1
260
ReactNative 探索之路
来自 Dengxi (@regrex)
David Zhang
September 02, 2016
Tweet
Share
More Decks by David Zhang
See All by David Zhang
ngx_share: conf & module
crispgm
0
16
Nginx 事件驱动机制
crispgm
0
310
Other Decks in Programming
See All in Programming
デザインシステムで Tailwind CSSとCSS in JSに分散投資をしたら良かった話
fsubal
14
3.3k
PHP 8.3で追加されたjson_validate()を徹底的に深掘りしてみよう
mashirou1234
1
720
incrementalモデルの理解を深める
ikkimiyazaki
2
640
自動テスト実行結果の目的を整理する / Organizing objectives of automated test results
twada
PRO
10
2.1k
Crafting a Own PHP - ウキウキ手作りミニマリストPHP
uzulla
4
1.1k
ここ1~2年くらいで 使えるようになった(主要ブラウザーの最新版 がすべて対応した ) ウェブの新機能について ランダムに喋る!
myzkyy
9
6.5k
コミュニティに参加したことで起きた変化
ohmori_yusuke
3
130
脱・初心者!脱・マネコン!AWS CDKを使ってみませんか!?
har1101
0
140
Open Source Swift Workshop - Foundation and first party libraries
ikesyo
0
250
WinUI 3デモ - "CommunityToolkit.Mvvm"NuGetパッケージ編
andrewkeepcoding
0
130
WebComponentsで フレームワークを1ページに共存させる
webuilder240
0
150
Why 1 + 1 = 2 in Swift?
1plus4
1
240
Featured
See All Featured
Creatively Recalculating Your Daily Design Routine
revolveconf
209
11k
Building a Modern Day E-commerce SEO Strategy
aleyda
15
6.3k
Web Components: a chance to create the future
zenorocha
304
41k
Learning to Love Humans: Emotional Interface Design
aarron
266
39k
A Tale of Four Properties
chriscoyier
150
22k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
5
1.4k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
225
51k
GraphQLとの向き合い方2022年版
quramy
28
12k
Into the Great Unknown - MozCon
thekraken
10
830
Music & Morning Musume
bryan
39
5.5k
4 Signs Your Business is Dying
shpigford
174
21k
5 minutes of I Can Smell Your CMS
philhawksworth
199
19k
Transcript
React Native探索之路
[email protected]
Content • React Native ᓌՕ • ᭌೠReact NativeҘ • ই֜ଫአReact
NativeҘ • Demoᄍᐏ • ᷚᴾ݊
React Native简介 • 概览 • 开发环境 • 技术构成 • 社区生态
React Native概览 LEARN ONCE, WRITE ANYWHERE BUILD MOBILE APPS WITH
REACT Shared JS Logic Code React Component React Virtual DOM System Layout Compiler & RTC Bridge Android Native UI iOS Native UI
React Native开发环境
React Native技术构成 • 基本元素 • UI更新逻辑 • 通信机制 • 布局机制
React Native基本元素 ListView View ScrollView TextInput TouchableHighlight … UITableView UIView
UIScrollView UITextField UIButton … React Native lib Cocoa Touch
React Native UI更新逻辑 React DOM diff算法
React Native通信机制 React Native Native • OC᭗ᬦRCT_CUSTOM_VIEW_PROPERTYਡูᶂંکRNጱprops᯾ • OC᭗ᬦRCT_EXPORT_MODULERCT_EXPORT_METHODਡูᶂᕳRN᯾ •
Java᭗ᬦ@ReactProp@ReactPropGroupဳ᯽ڊંጱsetොဩ׀RN • Native᭗ᬦRTCBridge׀ጱJSཛྷࣘොဩፗളᦢᳯ • ᭗ᬦRCTEventDispatcherզݎᭆളතၾ௳ጱොୗਫሿ᧣አҁJSጱߥଫࢧ᧣ڍහ҂ React Native᭗מګᧇᥴ 模块化、模块配置表、传递ID、封装调用、事件响应
Flex box Flex Container Flex Item Flex Item Flex Item
Cross Axis Main Axis Cross Size Main Size Autolayout React Native布局机制 Cross Start Cross End Main Start Main End
React Native社区生态 • 社区活跃度 • 谁在用React Native
React Native社区活跃度 • star: 37k+ • fork: 8k+ • component:
500+ https://js.coach/react-native React Native: A year in review
谁在用React Native Apps: 100+ showcase
Content • React Native ᓌՕ • ᭌೠReact NativeҘ • ই֜ଫአReact
NativeҘ • Demoᄍᐏ • ᷚᴾ݊
选择React Native? • 开发成本 • 对比其他方案 • 医疗业务应用场景
React Native开发成本 RN ≈ (Android + iOS + Web) /
2 ӣොᦡᦇӞᛘ
对比其他方案 H5、React Native、Native应用对比分析
医疗业务应用场景 • App中频繁迭代部分:如医疗服务 • 新App开发:如医院版
Content • React Native ᓌՕ • ᭌೠReact NativeҘ • ই֜ଫአReact
NativeҘ • Demoᄍᐏ • ᷚᴾ݊
如何应用React Native • 开发 • 联调 • 测试 • 发布
开发 • 环境搭建 • 知识储备 • 代码调试
联调 • 与server联调 • 植入原生应用
与server联调 比XMLHttpRequest更先进的WebAPI,支持Promise fetch('http://api.baidu.com/path?params') // web api .then( response => response.json()
) .then( json => { // ྋଉߥଫ॒ቘ᭦ᬋ }) .catch(error => // ଉ॒ቘ᭦ᬋ );
植入原生应用 1. 通过CocoaPods安装React Native 2. 创建继承自UIView的ReactView应用类 3. 通过RN的index.ios.bundle来初始化RCTRootView 4. 添加ReactView为rootView的子视图
5. 更新App Transport Security(http支持) 6. 编译运行 iOS
植入原生应用 1. build.gradle添加React Native依赖 2. 创建实现ReactRootView的原生Activity 3. 获取index.android.bundle文件 4. 关联index.android.js里的React
Native应用 5. 构建Android应用 Android
测试 • Jest Tests(JS-only) • 单元测试(buckbuild) • 集成测试(buckbuild with Android
SDK+NDK) • iOS有Snapshot Tests ဳғJestฎचԭJasmine҅य़᮱ړAPIฎ᭗አጱ
发布 • CodePush类服务(操作简单,但是需要APP继承SDK) • 自己搭建部署服务(iCode+Agile+ORP)
Content • React Native ᓌՕ • ᭌೠReact NativeҘ • ই֜ଫአReact
NativeҘ • Demoᄍᐏ • ᷚᴾ݊
Demo演示 iOS
Demo演示 Android
Demo演示 Web
Demo资料 • msbu-react group • 上线bundle • babel静态资源处理插件
一些坑 • Android中Android SDK Build-Tools V23.0.1限制 • 三端同构产出内容需要微调抹平(如flex布局元素height) • 产出bundle内容处理(自写babel插件替换资源路径)
• 等等,其实还有很多,宝宝突然懵圈想不起来了
Content • React Native ᓌՕ • ᭌೠReact NativeҘ • ই֜ଫአReact
NativeҘ • Demoᄍᐏ • ᷚᴾ݊
风险及挑战 • 面临的问题及处理办法 • 构建React Native生态
面临的问题 • 版本支持度:Android 4.1+、iOS 7.0+ • 性能在高低端机型上呈两极 • 部分非常用组件存在平台差异 •
项目不成熟,版本不稳定,官方文档较少 • 对开发者的综合能力要求较高 • Web端SEO劣势
处理办法 • 版本支持度:目前App的兼容范围Cover,低版本降级处理 • 低端机性能:低端机型提供核心功能降级Web版本 • 平台性差异:搭建组件库,抹平差异 • 项目不成熟:自建生态,保持对社区的敏锐嗅觉 •
开发者能力:提供整套开发解决方案,降低研发成本 • Web端SEO:服务器端渲染
构建React Native生态 რ ݎ ᧣ᦶ ၥᦶ ݎ ࢧ჻ ፊഴ ս۸
ݎ֛ḵ̵ᗑᕶ๐ۓ ᚆ̵አಁ֛ḵ ᚆ̵Კ̵አಁᤈԅ ىഴګ̵ᴳᕆکweb ᛔᖫᦲ۱̵૧ړୌ̵ےੂ॒ቘ ORPӤᕚ̵WebᒒݶӤᕚ ଉᥢ፥ၥᦶ MVPग़ᦡ॓ԯᒒၥᦶ Chrome Developer Tools ෭பګ̵ሾहڔഘګ ݎሾह൫ୌ̵ݎᘏଘݣҁDEMO//ᩒᦔ҂ ጯଶ܅ኞAppᵞ౮̵चᏐᕟկ݊ӱۓᕟկ ᐒ܄ᨯሠ̵݇Өრ
React Native资料 • facebook-react-native • awesome-react-native • react & redux
Q&A