使用React Native和Expo快速構建原生移動iOS和Android應用程式
當您想開發一個新的APP,您希望儘快從使用者那裡獲得反饋,看看這個想法是否有支援,並開始對其進行改進,一旦人們嘗試以後,反饋就會不斷進來,然後你才得以不斷改進。
因此,我們的主要目標是儘可能快地從使用該APP的使用者那裡獲得真實的使用者反饋。
在這篇文章中,我們將開始建立一個應用程式,並且可以在5分鐘內與其他人分享,這樣他們就可以在您構建時為您提供反饋。
次要目標
- Native App - 不是在瀏覽器中執行的響應式Web應用程式,一個完全原生的應用程式
- 跳過應用商店 - 在應用商店中獲得批准的應用是一個耗時且耗時的過程。
快速原因:
- 沒有Apple開發者計劃註冊(99美元+天)
- 沒有建立程式碼簽名證照
- 沒有從計算機到裝置的電纜
- 沒有在Xcode中編譯
- 沒有上傳到TestFlight
- 沒有邀請使用者使用TestFlight
- 沒有應用商店稽核流程
鑑於這些目標,目前可用的最佳工具集之一是React Native和Expo。
React是一個用於構建使用者介面的宣告性,高效且靈活的JavaScript庫。
React Native是一個使用React構建原生iOS和Android應用程式的框架。
Expo是一種快速建立React Native應用程式的工具。使用Expo,您可以啟動一個新應用程式,在瀏覽器中預覽,然後在您自己的裝置上檢視,並立即與他人分享(5分鐘)。
Snack是一個輕量級的Expo線上IDE,允許您在幾秒鐘內在瀏覽器中執行程式碼。它非常適合快速實驗和分享示例。
去snack.expo.io。你會看到一些程式碼和iPhone的影像,帶有一個大的“點選播放”按鈕。點選它,應用程式將在裝置模擬器中啟動。
如果你更改程式碼,它會自動更新。
安裝Expo工具鏈
首先,安裝Node.js最新版本。
其次,安裝Node的Expo包。
npm install expo-cli --global
第三步,在您的裝置上安裝expo移動應用程式。無論是iOS還是Android。
建立一個新的APP
安裝完所有內容後,您可以從終端執行以下命令,以便在開發中執行新的應用程式。
expo init my-new-project cd my-new-project expo start |
掃描應用程式二維碼以在裝置上執行它
您將在終端和Dev Tools中看到QR碼。要在您的裝置上開啟您的專案,只需使用Android上的Expo Client應用程式或使用iOS上的Camera應用程式的內建QR程式碼掃描器掃描QR程式碼。
立即檢視您的更改
- 編輯主螢幕 screens/HomeScreen.js
- 觀看您的裝置重新整理
相關文章
- react native 和原生平臺 android的互動React NativeAndroid
- 原生移動應用框架React Native與Flutter比較框架React NativeFlutter
- 譯:原生iOS應用程式和原生Android應用程式設計之間的差異iOSAndroid程式設計
- [譯] React Native 與 iOS 和 Android 通訊React NativeiOSAndroid
- [譯] 使用Capacitor 和 Vue.js 構建移動應用Vue.js
- Flutter還是React Native?誰是2021年構建移動應用程式的最佳選擇?FlutterReact Native
- 使用Java和Dapr構建雲原生應用簡介Java
- 使用JHipster構建Spring和React構建電子商務應用程式原始碼 -DEVSpringReact原始碼dev
- [譯] 原生 iOS(Swift) 和 React-Native 的效能比較iOSSwiftReact
- 使用Rust和WebAssembly構建Web應用程式RustWeb
- 使用 Yarn workspace,TypeScript,esbuild,React 和 Express 構建 K8S 雲原生應用(一)YarnTypeScriptUIReactExpressK8S
- Flutter Cupertino 教程:如何構建外觀和感覺原生的 iOS 應用FlutteriOS
- React Native填坑之旅--使用原生檢視AndroidReact NativeAndroid
- React Native 橋接原生 iOS 以及 Android 獲取 APP 版本號React Native橋接iOSAndroidAPP
- [譯] 測試原生,Flutter 和 React Native 移動開發之間的效能差異FlutterReact Native移動開發
- Judo:使用無程式碼構建原生應用體驗
- expo react-native視訊播放元件React元件
- react-native 仿原生自定義彈窗|iOS/Android 彈窗效果ReactiOSAndroid
- 在React Native中構建啟動屏React Native
- [譯] 為多個品牌和應用構建 React 元件React元件
- 使用 IBM Bluemix 構建,部署和管理自定義應用程式IBM
- 【譯】使用 MongoDB,React,Node 和 Express(MERN)構建一個全棧應用MongoDBReactExpress全棧
- React Native釋出APP之打包iOS應用React NativeAPPiOS
- 探索 react-native run-ios(android)ReactiOSAndroid
- ? React-Native 官方示例演示 ( ios & android)ReactiOSAndroid
- 《React Native跨平臺移動應用開發》讀後鬼扯React Native
- 使用Java和Spring MVC構建Web應用JavaSpringMVCWeb
- 使用Java和Reactive Streams構建流式應用JavaReact
- 使用 Docker 和 Elasticsearch 構建一個全文搜尋應用程式DockerElasticsearch
- React Native學習指南:React Native嵌入到原生應用的一次嘗試React Native
- 使用 Kotlin 構建 MVVM 應用程式—提高篇:Dagger-AndroidKotlinMVVMAndroid
- 用VIPER構建iOS應用iOS
- 使用Jenkins自動構建Android應用打包並上傳JenkinsAndroid
- 移動跨平臺方案對比:WEEX、React Native、Flutter和PWAReact NativeFlutter
- 使用 create-react-app 構建 react應用程式流程及開發注意點ReactAPP
- 使用 Redis 和 Python 構建一個共享單車的應用程式RedisPython
- 使用 Micronaut和OpenFaaS 構建無伺服器Java 應用程式 - openvalue伺服器Java
- 使用React、Electron、Dva、Webpack、Node.js、Websocket快速構建跨平臺應用ReactWebNode.js