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: || ;
justifyContent: flex-start | flex-end | center | space-between | space-around;
alignItems: flex-start | flex-end | center | baseline | stretch;
alignContent: flex-start | flex-end | center | space-between | space-around | stretch;

order: ;
flexGrow: ; /* default 0 /
flexShrink: ; / default 1 /
flexBasis: | auto; / default auto */
flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
alignSelf: auto | flex-start | flex-end | center | baseline | stretch;
圖片
圖片使用

命名規則
• icon_test.png
• icon_test@2x.png
• icon_test@3x.png
連接原生庫
第一步
安裝帶原生依賴的庫
npm install <某個帶有原生依賴的庫> --save
第二步
運行如下命令，它會根據package.json文件中的dependencies和devDependencies記錄來連接全部須要連接的庫
react-native link
開發技巧
• 啓動hot或者debug的時候，切記不要同時啓動ios and android，二者會發生衝突，致使出現程序崩潰，從而影響開發
• 最好的方式是，啓動一個hot或debug，這樣能夠良好的進行開發；另外一個手動足夠了
處理觸摸事件
使用"Touchable"開頭的一系列組件
經過onPress屬性接受一個點擊事件的處理函數
• 兩種方式綁定事件，並處理點擊範圍
• 推薦第二種，方便傳遞數據
_onPressButton=((item)=>{
alert(1)
console.log(item);
})
render() {
return (



{this.state.bg}


{
this._onPressButton(this.state.bg)
}}>

{this.state.bg}



);
}
解決版本衝突問題
js版本和rn版本出現衝突
• Watchman是由Facebook提供的監視文件系統變動的工具。安裝此工具能夠提升開發時的性能（packager能夠快速捕捉文件的變化從而實現實時刷新）。
• 清除Watchman：watchman watch-del-all
• 清除rn緩存：react-native start --reset-cache
解決路由失效問題
• createTabNavigator要在createStackNavigator裏面進行註冊，纔可以使用createStackNavigator具備的方法，這個是我第二次配置的時候掉進的一個坑
this.props.navigation屬性詳細說明
• 在createTabNavigator裏面沒有push、replace等方法
• 在createStackNavigator中存在push、replace等方法
AsyncStorage保存報錯
JSON value ' ' of type NSNull
• 當保存值爲undefined的時候，報錯
• 防止這種問題發生最好在this.state中保存初始值爲空，必要時能夠提醒用戶
react-native支持的style props
• 查看最新版屬性支持狀況，最簡單的直接在頁面使用錯誤的屬性，而後查看報錯信息😂
Valid style props: [
"alignContent",
"alignItems",
"alignSelf",
"aspectRatio",
"backfaceVisibility",
"backgroundColor",
"borderBottomColor",
"borderBottomEndRadius",
"borderBottomLeftRadius",
"borderBottomRightRadius",
"borderBottomStartRadius",
"borderBottomWidth",
"borderColor",
"borderEndColor",
"borderEndWidth",
"borderLeftColor",
"borderLeftWidth",
"borderRadius",
"borderRightColor",
"borderRightWidth",
"borderStartColor",
"borderStartWidth",
"borderStyle",
"borderTopColor",
"borderTopEndRadius",
"borderTopLeftRadius",
"borderTopRightRadius",
"borderTopStartRadius",
"borderTopWidth",
"borderWidth",
"bottom",
"color",
"decomposedMatrix",
"direction",
"display",
"elevation",
"end",
"flex",
"flexBasis",
"flexDirection",
"flexGrow",
"flexShrink",
"flexWrap",
"fontFamily",
"fontSize",
"fontStyle",
"fontVariant",
"fontWeight",
"height",
"includeFontPadding",
"justifyContent",
"left",
"letterSpacing",
"lineHeight",
"margin",
"marginBottom",
"marginEnd",
"marginHorizontal",
"marginLeft",
"marginRight",
"marginStart",
"marginTop",
"marginVertical",
"maxHeight",
"maxWidth",
"minHeight",
"minWidth",
"opacity",
"overflow",
"overlayColor",
"padding",
"paddingBottom",
"paddingEnd",
"paddingHorizontal",
"paddingLeft",
"paddingRight",
"paddingStart",
"paddingTop",
"paddingVertical",
"position",
"resizeMode",
"right",
"rotation",
"scaleX",
"scaleY",
"shadowColor",
"shadowOffset",
"shadowOpacity",
"shadowRadius",
"start",
"textAlign",
"textAlignVertical",
"textDecorationColor",
"textDecorationLine",
"textDecorationStyle",
"textShadowColor",
"textShadowOffset",
"textShadowRadius",
"textTransform",
"tintColor",
"top",
"transform",
"transformMatrix",
"translateX",
"translateY",
"width",
"writingDirection",
"zIndex"]
StatusBar解決android狀態欄問題
設置StatusBar

設置頂部模塊的樣式
• 注：padding值須要+高度值=>height最終值
height: 50,
paddingTop: 10,
Platform區分ios and android平臺
三種方法實現跨平臺：
1. Platform.OS
2. 使用Platform的select方法
3. 使用不能組件名：ios使用header.ios.js；android使用header.android.js
const instructions = Platform.select({
ios: 'ios',
android: 'android',
});
請求fetch封裝
• HttpUtils.js
引入
import HttpUtils from '../../HttpUtils';
使用
• 在全局global.data.domain保存請求域名
• 請求須要header傳遞token的使用,global.data.token
HttpUtils.post( ${apiConfig}, {
platform: 'ios'
},global.data.token)
.then(rtn => {
global.data.config = rtn;
// console.log( 配置=>( ${JSON.stringify(rtn)} ));
})
.catch(err => {
console.log('error', err)
})
請求環境+請求地址定義
請求環境
• 在addr.js中env變量定義
請求地址
• 在addr.js中addrList統一管理全部請求地址
使用
import addrList from '../../addr';
const {apiConfig}=addrList;
react-native-scrollable-tab-view
• 解決逗號影響的報錯問題：在路徑~/node_modules/react-native-scrollable-tab-viewSceneComponent.js下刪除便可
react-native初始化報錯，致使沒法初始化
• 從新設置一下地址
npm config set registry https://registry.npm.taobao.org
npm config set disturl https://npm.taobao.org/dist
動態切換狀態
• 採用對象的形式來操做，這樣可使用state裏面的參數，來動態切換
• 解決了直接應用的報錯問題，之後遇到一樣的問題要及時想到對象方式
聲明週期-初始渲染 and 檢測goBack()
• 爲了保證頁面的數據實時性，最好在初始的時候進行請求
componentDidMount(){}
檢測goBack()
須要從新加載app
第一步
• 在刪除組件的時候，定義goBack事件
componentWillUnmount(){
DeviceEventEmitter.emit('goBack', 'goBack刷新返回頁面數據');
}
第二步
• 在初始渲染中監聽，goBack自定義事件
componentDidMount(){
// 接收
this.deEmitter = DeviceEventEmitter.addListener('goBack', (a) => {
this.loadData();
});
}
安卓打包
第一步：生成Android簽名證書
第二步：設置gradle變量
• 將你的簽名證書copy到android/app目錄下
• 編輯~/.gradle/gradle.properties或../android/gradle.properties(一個是全局gradle.properties，一個是項目中的gradle.properties，你們能夠根據須要進行修改) ，加入以下代碼：
MYAPP_RELEASE_STORE_FILE=ch09-keystore.jks
MYAPP_RELEASE_KEY_ALIAS=ch09-keystore
MYAPP_RELEASE_STORE_PASSWORD=123456
MYAPP_RELEASE_KEY_PASSWORD=123456
第三步：在gradle配置文件中添加簽名配置
• 編輯android/app/build.gradle文件添加以下代碼：
...
android {
...
defaultConfig { ... }
signingConfigs {
release {
storeFile file(MYAPP_RELEASE_STORE_FILE)
storePassword MYAPP_RELEASE_STORE_PASSWORD
keyAlias MYAPP_RELEASE_KEY_ALIAS
keyPassword MYAPP_RELEASE_KEY_PASSWORD
}
}
buildTypes {
release {
...
signingConfig signingConfigs.release
}
}
}
...
第四步：簽名打包APK
• terminal進入項目下的android目錄，運行以下代碼：
./gradlew assembleRelease
• 簽名打包成功後你會在android/app/build/outputs/apk/目錄下看到簽名成功後的app-release.apk文件。
• 提示：若是你須要對apk進行混淆打包 編輯android/app/build.gradle：
/**

• 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