React-Native專案總結

minmin520發表於2018-10-23
React

一、常見的五種APP開發模式

Native App，web App，hybrid App，React Native，Weex

  • Native App原生API開發App，iOS用OC語言開發，效能高
  • Hybrid App混合開發模式，原生加html共同開發，html嵌在webview中
  • React Native基於React開發的App，跨平臺，熱更新，有Native的體驗
  • Web App用Html開發的移動端網頁，類似微信小程式，整個APP都是網頁，使用者不需要安裝，但是需要聯網
  • Weex基於Vue語法開發的APP，底層會自動把JS程式碼解析成對應平臺，本質是原生API開發，表面上是Vue開發

二、React-Native的原理

  1. React-Native框架提供一份OC模組表，JS參照模組表，間接呼叫OC的程式碼
  2. React-Native如何做到JS和OC互動：
    1)首先寫好JSX程式碼，將JSX程式碼解析成JavaScript程式碼
    2）OC讀取JS檔案，利於JavaScriptCore的執行
    3)JavaScript程式碼返回一個陣列，陣列中描述OC物件，OC物件的屬性，OC物件所需要執行的方法，以此為該物件設定屬性，呼叫方法

三、React-Native專案與React專案的區別：

  1. React-Native是一個搭建APP的框架，React是一個用來構建網頁站點JavaScript庫
  2. React-Native幾乎不需要整合其它東西就可以直接運用ES6，ES7特性編寫，React則可能需要整合Webpack的打包器。
  3. React-Native不使用HTML來渲染APP，而是使用其特有的元件。這些元件渲染到APP上是真正的iOS和Android UI元件。React使用的是HTML，渲染的是網頁上的DOM元素。
  4. React-Native中使用的樣式，不是傳統的CSS,中間線，而是有其特有的樣式屬性，駝峰式命名。 "alignItems","alignSelf", "backfaceVisibility", "backgroundColor","borderBottomColor", "borderBottomLeftRadius", "borderBottomRightRadius", "borderBottomWidth", "borderColor", "borderLeftColor", "borderLeftWidth", "borderRadius", "borderRightColor", "borderRightWidth", "borderStyle", "borderTopColor", "borderTopLeftRadius", "borderTopRightRadius", "borderTopWidth", "borderWidth", "bottom", "color", "flex", "flexDirection", "flexWrap", "fontFamily", "fontSize", "fontStyle", "fontWeight", "height", "justifyContent", "left", "letterSpacing","lineHeight", "margin", "marginBottom", "marginHorizontal", "marginLeft", "marginRight", "marginTop", "marginVertical", "opacity", "overflow", "padding", "paddingBottom", "paddingHorizontal", "paddingLeft", "paddingRight", "paddingTop", "paddingVertical", "position", "resizeMode", "right", "rotation", "scaleX", "scaleY", "shadowColor", "shadowOffset", "shadowOpacity", "shadowRadius", "textAlign", "textDecorationColor", "textDecorationLine", "textDecorationStyle", "tintColor", "top", "transform", "transformMatrix", "translateX", "translateY", "width", "writingDirection" React-Native對flex佈局有很好的支援，沒有網頁上其相容性的困擾。
  5. 導航不同：React-Native中導航方式現在用的較多的是React Navigation。之前比較老的Navigator和NavigatorIOS已逐漸被替代。 簡單介紹一下React Navigation
    1）建立一個AppNavigation.js,註冊所有頁面，設定其別用名
import IndexScreen from './index';
import LoginScreen from './page/login';
export const AppNavigator = StackNavigator({
index: { screen: IndexScreen },
login: { screen: LoginScreen },
},{
initialRouteName: 'index', // 預設顯示介面
});
跳到下一個頁面觸發方法：
_goLogin(){
this.props.navigation.dispatch(NavigationActions.navigate({ routeName: 'login'}));
}
複製程式碼

React導航用的是react-router

  1. 平臺的特殊程式碼 React-Native的Platform可以監測平臺，安卓還是iOS，具體為：Platform.OS === 'ios' ? 1 : 0
  2. 開發工具不同 React-Native針對iOS用Xcode和ios模擬器，針對Android用Android Studo和Android模擬器 而React就是瀏覽器 React-Native開啟除錯模式，也能在瀏覽器中打斷點，或看到一些log日誌用於除錯
  3. 開發和部署方式不同 React-Native開發的是APP，所以針對Android就用Android Studo打出測試包或者正式包， 針對iOS，就由Xcode打出要上架的ipa，提交稽核，相對於原生，還有熱更新的好處。 React開發的是網頁，所以就正常Webpack打包，釋出上線

四、React-Native元件的生命週期

React-Native應用是由各型別的元件構成，每個元件有自己的生命週期。 元件從出生到消亡，React-Native框架通過不同的生命週期方法，提供了方便切入生命週期各階段的鉤子函式。 當應用啟動，React-Native框架在記憶體中維護著一個虛擬的DOM樹。 生命週期方法：元件初始化及掛載階段、元件執行階段及元件解除安裝階段

1.初始化及掛載階段

constructor(props) { //建構函式   super(props); //繼承父元件傳來的屬性   this.state = { //設定自己的state     //key : value   }; }
componentWillMount(){  //元件將要載入到虛擬DOM,在render之前執行，僅一次
}
componentDidMount(){   //元件已經載入到虛擬DOM,在render之後執行，僅一次，進行網路請求或整合其它JavaScript庫
}
複製程式碼
  1. 執行期階段
componentWillReceiveProps(nextProps){  //元件接收到新的props，重新設定state，可多次
  this.setState({
    //key:value
  })
}
shouldComponentUpdate(nextProps,nextState){
//在上面函式執行完畢後執行，或在state更改之後，若返回false，元件不會重新渲染,可多次
  return true
}
componentWillUpdate(nextProps,nextState){
//在上面函式執行完畢後執行
}
componentDidUpdate(){ //在render方法後執行，可多次
}
render(){
  return (
    <View></View>
  )
}
複製程式碼
  1. 解除安裝階段 componentWillUnmount(){ //元件由虛擬DOM解除安裝時呼叫 }

五、踩坑

1.專案啟動總是載入pre-bundled，導致修改之後reload無效

答：找到react-native-xcode.sh,將.xip.io刪掉

React-Native專案總結

  1. Android手機上如何設定陰影，設定陰影后為什麼有時候會失效？
shadowColor:’#555’,
shadowOpacity:0.5,
shadowRadius:10,
shadowOffset:{width:2,height:2},
elevation:1,
zIndex:Platform.OS == ‘ios’?2:1,
// 失效是應為Android5.0以上系統才支援elevation
複製程式碼
  1. Android手機底部tab總是被鍵盤頂起？

在android目錄下有AndroidManifest.xml設定android:windowSoftInputMode="stateVisible|adjustPan"

  1. Android頭部的狀態列怎麼設定？
    StatusBar backgroundColor={this.state.bgColor}
  2. 有時候xcode打不開？

升級xcode

  1. 如何設定iOS的icon圖示？
    1）iOS APP圖示尺寸：40，60，58，87，80，120，180，1024
    2）安卓APP圖示尺寸：114 iOS的icon設定如下：

React-Native專案總結

2）iOS的啟動圖設定：

React-Native專案總結

參考：【連結】iOS.11後的iOSLaunchImage blog.csdn.net/ozhuimeng12…

  1. ios打包所需要的步驟有？
    1）在電腦上通過鑰匙串下載證照
    2）identifier的App IDs設定，通過Xcode上的bunlde identifier設定
    3）將測試ios的udid通過device設定
    4）Profiles設定，選擇對應的App IDs,選擇對應的device
    備註：一個Bundle Identifier只能對應一個Identifiers， 就算是不同的帳號，在設定Identifiers時也不能設定一樣的，必須修改。

  2. iOS離線的方法

react-native bundle --entry-file index.ios.js --bundle-output ./ios/main.jsbundle --platform ios --assets-dest ./ios --dev false
複製程式碼
  1. React-Native熱更新機制
    通過code push，所謂的code push是指：呼叫react native的打包命令，將當前非native的程式碼全量打包成一個bundle檔案， 然後上傳到微軟雲伺服器。在APP的啟動頁（或splash頁）編寫請求更新的程式碼（請求包括了本地版本，hashCode, appToken等資訊） 微軟伺服器對比本地檔案js bundle版本和微軟伺服器的版本，如果本地版本低，就下載新的js bundle 下來後實現更新（ code push框架實現） 參考：blog.csdn.net/u013718120/…
  2. 安卓中TextInput元件的樣式問題
    TextInput在安卓上預設有一個底邊框，同時有一些padding，導致輸入框內的文字不居中
去掉底部框，用underlineColorAndroid=“transparent”
多行輸入，設定multiline = {true}，在安卓上文字預設居中，想讓其居頂顯示，可設定textAlignVertical: 'top'
讓文字居中，設定padding: 0
複製程式碼
  1. brew錯誤
    rm -f 是徹底刪除，要謹慎使用
    brew報錯的時候，先移除檔案，再下載，brew就好了，然後就可以install或者uninstall了

React-Native專案總結

  1. 快速點選多次跳轉的問題
let linkFlag = true;
if(linkFlag){
  this.props.navigation.dispatch(NavigationActions.navigate({ routeName: 'login', params: opt }));
  linkFlag = false;
}
setTimeout(
 () => {
   linkFlag = true;
}, 1000);
複製程式碼

相關文章