本書通過豐富的示例和詳細的講解,介紹了React Native這款JavaScript框架。在React Native中利用現(xiàn)有的JavaScript和React知識,就可以開發(fā)和部署功能完備的、真正原生的移動應(yīng)用,并同時支持iOS與Android平臺。除了框架本身的概念講解之外,本書還討論了如何使用第三方庫,以及如何編寫自己的Java或Objective-C的React Native擴展。第2版結(jié)合當前開發(fā)實踐,新增了有關(guān)平臺特定組件、狀態(tài)管理和Expo應(yīng)用的內(nèi)容。
“對于想要使用JavaScript構(gòu)建原生應(yīng)用的前端工程師,本書是非常實用的指導手冊,涵蓋了構(gòu)建和部署跨平臺移動應(yīng)用所需的各種知識!薄猂yan Hurley,Twitter軟件工程師
自2015年春天Facebook開源React Native以來,React Native憑借其強大的可擴展性、良好的用戶體驗以及可擁有原生外觀等優(yōu)勢得到關(guān)注和青睞。
本書是一本實踐指南,從基礎(chǔ)知識入手,逐步深入,。除了框架本身的講解,作者還探討了如何使用第三方庫,以及如何編寫自己的Java或者Objective-C的React Native擴展。第2版新增了部分章節(jié)及附錄,討論了如何在跨平臺組件中實現(xiàn)特定平臺的代碼,通過Redux庫來管理狀態(tài),以及對React Native初學者更友好的Expo應(yīng)用。
● 了解React Native如何開放原生UI組件接口
● 類比HTML元素,了解該框架如何使用原生組件
● 創(chuàng)建自己的React Native組件和應(yīng)用,并為它們編寫樣式
● 使用宿主平臺API,以及由React Native社區(qū)編寫的模塊
● 在跨平臺組件中實現(xiàn)特定平臺的代碼
● 使用工具來調(diào)試代碼,并解決JavaScript之外的問題
● 整合所學知識,開發(fā)高效記憶閃卡應(yīng)用
● 通過Redux庫來管理狀態(tài)
邦尼·艾森曼(Bonnie Eisenman),Twitter公司軟件工程師,曾任職于Codecademy、Google和Fog Creek Software公司,經(jīng)常受邀在技術(shù)大會上做演講。
【譯者簡介】
張俊達
前端開發(fā)工程師,關(guān)注前端領(lǐng)域的新技術(shù),樂于分享。譯作包括《React快速上手開發(fā)》《同構(gòu)JavaScript應(yīng)用開發(fā)》。
黃為偉
畢業(yè)于東北大學,前端開發(fā)工程師,開源項目react-native-guide作者,專注于Web與移動應(yīng)用開發(fā),目前任職于騰訊微信。
前言 xi
第 1章 初識React Native 1
1.1 React Native的優(yōu)點 2
1.1.1 開發(fā)者體驗 2
1.1.2 代碼復用與知識共享 3
1.2 風險和缺點 4
1.3 小結(jié) 4
第 2章 React Native工作原理 5
2.1 React Native是如何工作的 5
2.2 渲染周期 7
2.3 在React Native中創(chuàng)建組件 7
2.3.1 編寫視圖 8
2.3.2 使用JSX 9
2.3.3 原生組件的樣式 10
2.4 宿主平臺API 11
2.5 小結(jié) 11
第3章 構(gòu)建你的第 一個應(yīng)用 12
3.1 搭建環(huán)境 12
3.2 使用Create React Native App進行開發(fā)配置 13
3.2.1 使用create-react-native-app創(chuàng)建你的第 一個應(yīng)用 13
3.2.2 在iOS或者Android中預(yù)覽應(yīng)用 14
3.3 使用傳統(tǒng)方式進行開發(fā)配置 15
3.3.1 使用react-native創(chuàng)建第 一個應(yīng)用 15
3.3.2 在iOS平臺運行React Native應(yīng)用 16
3.3.3 在Android平臺運行React Native應(yīng)用 17
3.4 探索示例代碼 17
3.5 開發(fā)天氣應(yīng)用 20
3.5.1 處理用戶輸入 21
3.5.2 展現(xiàn)數(shù)據(jù) 24
3.5.3 從Web獲取數(shù)據(jù) 26
3.5.4 添加背景圖片 30
3.5.5 整合 31
3.6 小結(jié) 33
第4章 移動應(yīng)用組件 35
4.1 類比HTML元素與原生組件 35
4.1.1 文本組件 36
4.1.2 圖片組件 38
4.2 處理觸摸和手勢 39
4.2.1 使用<Button>創(chuàng)建基礎(chǔ)交互 40
4.2.2 使用<TouchableHighlight>組件 40
4.2.3 使用PanResponder類 43
4.3 使用列表 49
4.3.1 使用基礎(chǔ)的<FlatList>組件 50
4.3.2 更新<FlatList>的內(nèi)容 52
4.3.3 整合真實數(shù)據(jù) 56
4.3.4 使用<SectionList> 59
4.4 導航 62
4.5 其他結(jié)構(gòu)化組件 63
4.6 小結(jié) 64
第5章 樣式 65
5.1 聲明和操作樣式 65
5.1.1 內(nèi)聯(lián)樣式 66
5.1.2 對象樣式 66
5.1.3 使用Stylesheet.create 67
5.1.4 樣式拼接 67
5.2 組織和繼承 69
5.2.1 導出樣式對象 69
5.2.2 樣式作為屬性傳遞 70
5.2.3 復用和共享樣式 70
5.3 定位和設(shè)計布局 71
5.3.1 使用flexbox布局 71
5.3.2 使用絕對定位 75
5.3.3 學以致用 75
5.4 小結(jié) 79
第6章 平臺API 80
6.1 使用定位API 80
6.1.1 獲取用戶地理位置 81
6.1.2 處理權(quán)限問題 81
6.1.3 在模擬器上測試定位 82
6.1.4 監(jiān)聽用戶位置 84
6.1.5 限制 84
6.1.6 改進天氣應(yīng)用 84
6.2 使用用戶圖片與攝像頭 87
6.2.1 使用相機模塊進行交互 87
6.2.2 通過getPhotoParams獲取圖片 88
6.2.3 從相機渲染一張圖片 89
6.2.4 上傳圖片至服務(wù)器 90
6.3 AsyncStore持久化數(shù)據(jù)存儲 91
6.4 SmarterWeather應(yīng)用 92
6.4.1 <WeatherProject>組件 92
6.4.2 <Forecast>組件 95
6.4.3 <Button>組件 96
6.4.4 <LocationButton>組件 96
6.4.5 <PhotoBackdrop>組件 97
6.5 小結(jié) 99
第7章 模塊和原生代碼 100
7.1 使用npm安裝JavaScript類庫 100
7.2 安裝包含原生代碼的第三方組件 102
7.3 Objective-C原生模塊 103
7.3.1 編寫iOS的Objective-C原生模塊 103
7.3.2 探索react-native-video iOS版本 107
7.4 Java原生模塊 110
7.4.1 編寫Android的Java原生模塊 110
7.4.2 探索react-native-video Java版本 113
7.5 跨平臺原生模塊 116
7.6 小結(jié) 116
第8章 平臺特定代碼 118
8.1 僅iOS/僅Android可用的組件 118
8.2 平臺特定組件的實現(xiàn) 119
8.2.1 使用平臺特定的文件擴展名 119
8.2.2 使用平臺模塊 122
8.3 何時使用平臺特定組件 122
第9章 調(diào)試與開發(fā)者工具 123
9.1 JavaScript調(diào)試實踐和解釋 123
9.1.1 激活開發(fā)者選項 123
9.1.2 使用console.log調(diào)試 125
9.1.3 使用JavaScript調(diào)試器 126
9.1.4 使用React開發(fā)者工具 127
9.2 React Native調(diào)試工具 128
9.2.1 使用審查元素功能 128
9.2.2 宕機紅屏 129
9.3 JavaScript之外的調(diào)試方法 132
9.3.1 常見的開發(fā)環(huán)境問題 132
9.3.2 常見的Xcode問題 133
9.3.3 常見的Android問題 134
9.3.4 React Native包管理器 135
9.3.5 部署至iOS設(shè)備的問題 135
9.3.6 模擬器行為 136
9.4 測試代碼 137
9.4.1 使用Flow進行類型檢查 137
9.4.2 使用Jest進行單元測試 138
9.4.3 使用Jest進行快照測試 139
9.5 當你陷入困境 142
9.6 小結(jié) 142
第 10章 大型應(yīng)用中的導航與結(jié)構(gòu) 143
10.1 閃卡應(yīng)用 143
10.2 項目結(jié)構(gòu) 145
10.2.1 應(yīng)用屏幕 146
10.2.2 可復用組件 152
10.2.3 樣式 156
10.2.4 數(shù)據(jù)模型 157
10.3 使用React Navigation 159
10.3.1 創(chuàng)建StackNavigator 160
10.3.2 使用navigation.navigate在屏幕之間過渡 160
10.3.3 使用navigationOptions配置頁眉 163
10.3.4 實現(xiàn)余下邏輯 164
10.4 本章小結(jié) 165
第 11章 大型應(yīng)用中的狀態(tài)管理 166
11.1 使用Redux管理狀態(tài) 166
11.2 action 167
11.3 reducer 169
11.4 連接Redux 172
11.5 使用AsyncStorage持久化數(shù)據(jù) 179
11.6 本章小結(jié)和作業(yè) 182
總結(jié) 183
附錄A 現(xiàn)代JavaScript語法 184
附錄B 部署應(yīng)用 189
附錄C 使用Expo應(yīng)用 192
作者簡介 193
關(guān)于封面 193