「react native」不是原生app,「react native」寫的程式經過安卓studio編譯後才是原生app;原生app的開發模式是用react的jsx語法來寫的,而「react native」是跨平台移動應用開發框架,是Facebook早先開源的JS框架React在原生行動應用平台的衍生產物,支援iOS和安卓兩大平台。
本教學操作環境:Windows10系統、react17.0.1版、Dell G3電腦。
react native 寫的程式經過安卓studio編譯後就是一個原生app ,其開發模式是用react的jsx語法來寫的,特別像寫前端一樣,寫頁面結構/寫js/寫一種類似css語法的但不是css,這些可以渲染到寫入的頁面元件裡。
React Native (簡稱RN)是Facebook於2015年4月開源的跨平台行動應用開發框架,是Facebook早期開源的JS框架React 在原生行動應用平台的衍生產物,支援iOS和安卓兩大平台。 RN使用Javascript語言,類似HTML的JSX,以及CSS來開發行動應用,因此熟悉Web前端開發的技術人員只需很少的學習就可以進入行動應用開發領域。
擴展知識:
JSX就是Javascript和XML結合的一種格式。 React發明了JSX,利用HTML語法來創建虛擬DOM。當遇到<,JSX就當HTML解析,遇到{ 就當JavaScript解析。
react native 寫的程式經過安卓studio編譯後就是一個原生app ,其開發模式是用react的jsx語法來寫的,特別像寫前端一樣,寫頁面結構/寫js/寫一種類似css語法的但不是css,這些可以渲染到寫入的頁面元件裡。
react native 玩的也是元件,在node和npm環境下,可以建立一個react native項目,其依賴也是來自node_modules ,packge.json 也是一個外掛程式安裝的清單。 react native是一個原生程序,不需要使用到web pack。但少不了jdk 和andoird環境的配置和相關資源下載/相關整合工具的使用。
react native 的基本結構與文法
index.js
app.js
//一般在app.js寫的都是頂層路由,在這裡可以做一個路由頂層設計,這個app.js是在index.html裡面設定的。所以開始就會渲染這個元件,其後就是各個子元件的引入和使用,每個元件都是先引入react的資源,或是引入自己寫的元件,每個元件都是透過一個預設匯出類別作為載入的頁面,這個類別有建構函數,有成員函數,有渲染函數。還有一個react native 資源裡面的StyleSheet物件這個物件專門寫元件樣式的。
建構函式裡面有state這個state叫做狀態,用來操作元件狀態的。在這裡state裡面設定狀態屬性,透過狀態屬性可以做很多彈性的操作。成員函數可以操作這些在建構函式裡面設定的狀態屬性。渲染函數就是render ,這個函數裡面可以引用引入的資源的元件,而寫一個更大的元件。一個大概的react native 元件就是這樣來完成業務的。程式碼可以根據自己的需求和官方文件的語法去寫。