react-native開發總結
項目地址：http://liu12fei08fei.github.io/blog/41react-native.html
說明
? 項目總結代碼地址
? 從項目開始啟動（2018-07-02）到項目進入測試（2018-08-20）
? 從我基本沒用過react，到直接上手react-native
? 其實從內心我是又愛又怕，愛是我確實很早就像下手除Vue以外的框架，多接觸和學習一些不一樣的思想；怕是前端就我一個，一切坑都由自己來抗；可想而知，內外壓力一定會很大
? 過程就是日復一日的研究在研究，不停地問問題，然後在研究；開發rn很想開發小程序，更多時候還是利用rn提供的組件，再加上一些js技巧
? 結果：自己對社區的利用更加的順手，面對難題不在過分畏懼而是不斷深入思考，直至解決
? 心理：其實直面難題並不難，難的是自己看到了難題背後還有無數個難題，這時候自己就不想面對了；後來知道與其逃避，不如遇到一個幹掉一個，不然攻城獅不是白叫了
? 下面是自己在實際中從開始到結束總結的一些東西，後續隨著進展還會更新
簡介
? 記錄開發react-native中各種有意思的事情
? 最新探索，用來進行各種嘗試的空間
? 完成的探索，記錄所有已經完成的模塊、功能和效果
? 中轉站，暫時無用
安裝
全局腳手架
npm i -g react-native-cli
安裝基礎項目
react-native init <項目名稱>
運行
優化後的運行
? ios：npm run ios
? android：npm run android
? ios and android：npm run s
原始啟動
? ios：react-native run-ios
? android：react-native run-android
資源
? navigation集成
? 集成icons
? react-native-easy-toast
? rn資源列表
? 橫向滑動展示按鈕效果
? 自定義行動列表
? 密碼輸入效果
? 選項卡導航之間滑動
? 二維碼生成
未探索的資源
365個庫中尋找77個
1. select選擇控件
2. 開關式選擇列表
3. 表情選擇器
4. 左右滑動層
5. 手機號選擇控件
6. 登錄動畫
7. 圖片查看器
8. 菜單操作動畫
9. 滑動操作圖片展示樣式
10. 操作打字效果
11. 聲音可視化
12. 占位符
13. 圖片查看器
14. 模糊背景效果
15. 本地圖片超級操作
16. 四面八方拖動效果
17. 信用卡輸入效果
18. 展開動畫效果
19. chart
20. 初始化啟動頁
21. 日期
22. 左右滑動操作卡片效果
23. 列表拖拽
24. chart
25. 密碼鎖效果
26. 星級評價
27. 手動簽字
28. 滑動時間軸效果
29. 國家26字母選擇
30. PDF查看
31. 26字母選擇
32. 分享
33. 對話框
34. 電話、地址等操作
35. 後臺信息保護
36. 圖片查看器
37. 左右滑動動畫
38. 無網絡操作
39. 顏色選擇器
40. 左右滑動tab動效
41. 加載中效果
42. 左右滑動效果，類似酷劃鎖屏
43. 二維碼生成器
44. 圖片查看器
45. 視差效果
46. 日期
47. 點擊效果、
48. 扇形菜單
49. 手勢識別
新增頁面需要在三個地方進行操作
1. data裏面的complete.js中添加數據，方便在完成的探索中出現
2. navigators中的AppStackNavigators.js裏面進行引入=>註冊，使得路由正常
3. pages裏面添加頁面
優化package.json使開發更加方便
? 在scripts中添加，如下內容：
"ios":"react-native run-ios",
"android":"react-native run-android",
"s":"npm run ios && npm run android",
flex布局常用屬性
? 防止在flex中出現，固定元素被擠壓的問題，使用flex:1進行優化
display: ‘flex‘;
flexDirection: row | row-reverse | column | column-reverse;
flexWrap: nowrap | wrap | wrap-reverse;
flexFlow:
order:
- Run Proguard to shrink the Java bytecode in release builds.
/
def enableProguardInReleaseBuilds = true
錯誤處理
fetch(apiLogin, {
method: ‘POST‘,
headers: {
‘Accept‘: ‘application/json‘,//通過頭指定，獲取的數據類型是JSON
‘Content-Type‘: ‘application/json‘,
‘Authorization‘:global.data.token,
},
body: JSON.stringify({
// 請求參數
})
})
.then(result => {
const {status,statusText} = result;
if(status>=200&&status<300||status==304){
// 成功
const promise = result.json()
promise.then(rtn=>{
// 成功
})
}else if(status==403){
// 跳轉登錄
this.props.navigation.replace(‘login‘);
}else{
// 提醒 statusText
this.refs.toast.show(statusText);
}
})
.catch(error => {
if(Object.prototype.toString.call(error) === ‘[object Object]‘){
this.refs.toast.show(JSON.stringify(error))
}else{
this.refs.toast.show(error)
}
})
app的logo and name
android
LOGO
? 將logo分別放到android/app/src/main/res下的四個文件夾中,命名為ic_launcher.png
? 沒有對應上的文件夾放一張10241024或者512*512的即可
app名稱
? 在android/app/src/main/res/values/strings.xml中更改
IOS
LOGO
? xcode> 根目錄 >Images.xcassets 將生成的圖標拖入對應的位置
app名稱
? xcode> 根目錄 >Info.plist 中修改 Bundlename 和 General> DIsplay Name
react-native開發總結