React本機 (React Native)
React Native is a cross-platform framework for building mobile applications that can run outside of the browser?—?most commonly iOS and Android applications
React Native是一個跨平臺框架,用于構建可在瀏覽器外部運行的移動應用程序-最常見的iOS和Android應用程序
It can be used to build applications on Windows devices, desktop OS’s, and Apple TV apps as well but this guide will only be covering its most common purpose?—?Android and iOS applications.
它也可以用于在Windows設備,臺式機操作系統和Apple TV應用程序上構建應用程序,但本指南僅涵蓋其最常見的用途-Android和iOS應用程序。
Table of Contents
目錄
What is React Native?
什么是React Native?
Reasons to choose React Native
選擇React Native的理由
How to Get Started with React Native
如何開始使用React Native
什么是React Native? (What is React Native?)
React Native falls in-between native and hybrid applications on the mobile app spectrum. The user interface you create is entirely native and the overall application performance is nearly as good as writing a native app.
在移動應用程序范圍內,React Native介于本地應用程序和混合應用程序之間。 您創建的用戶界面完全是本機的,整體應用程序性能幾乎與編寫本機應用程序一樣好。
It also gives you the flexibility to embed web views (webpages) or native code (Java/Kotlin for Android, Objective C/Swift for iOS) inside your applications wherever you want.
它還使您可以靈活地將Web視圖(網頁)或本機代碼(Android的Java / Kotlin,iOS的Objective C / Swift)嵌入到所需的位置。
It follows the same pattern as React where the views (what you see on the screen) are rendered from the JavaScript files. The difference is that it supplies its own API for handling native mobile views vs the DOM on the web.
它遵循與React相同的模式,其中從JavaScript文件渲染視圖(在屏幕上看到的內容)。 不同之處在于,它提供了自己的API來處理本機移動視圖,而不是Web上的DOM。
If you are confused about how this works, follow this guide on freeCodeCamp and it will take you step by step through these concepts.
如果您對它的工作方式感到困惑,請遵循freeCodeCamp上的本指南,它將逐步引導您了解這些概念。
選擇React Native的理由 (Reasons to choose React Native)
Code reusability?—?It uses one code based that is shared between both platforms.
代碼可重用性 -它使用一種基于代碼的代碼,在兩個平臺之間共享。
Reuse web tools and skills?—?Reuse JavaScript knowledge, tools and utilities like
axios
, Redux, and other libraries that don’t require the DOM from the web.重用Web工具和技能 -重用JavaScript知識,工具和實用程序,例如
axios
,Redux和其他不需要Web DOM的庫。Optimized for developer productivity?—?Comes with features like hot/live module reloading and chrome developer tools for debugging out of the box!
針對開發人員的生產力進行了優化 -帶有熱/實時模塊重新加載功能以及用于調試的chrome開發人員工具等功能!
Performance?—?Performs better than hybrid application frameworks like Ionic and Cordova since it is not using web views.
性能 —由于未使用Web視圖,因此其性能比Ionic和Cordova等混合應用程序框架更好。
Corporate backing?—?Lots of companies support and contribute to React Native including Walmart, Airbnb, Wix, and, of course, Facebook.
企業支持 -許多公司支持和貢獻React Native,包括沃爾瑪,Airbnb,Wix,當然還有Facebook。
Community?—?React Native has a large (and growing) community with over 1500 contributors to the core project and thousands more who contribute to various libraries.
社區 -React Native擁有一個龐大的社區(并且正在不斷發展),該社區有1500多個貢獻者為核心項目,成千上萬的人為各種圖書館做出了貢獻。
Better user experience?—?React Native uses the JavaScript code to render native components from your phone’s OS. In other words, the application’s user interface (UI) is entirely native!
更好的用戶體驗 -React Native使用JavaScript代碼從手機的操作系統渲染本機組件。 換句話說,應用程序的用戶界面(UI)完全是本機的!
Cross-Platform - Great way to prototype and save time while building either a universal user interface or platform specific mobile application that can run on both iOS and Android devices.
跨平臺 -在構建可在iOS和Android設備上運行的通用用戶界面或特定于平臺的移動應用程序時,實現原型和節省時間的好方法。
如何開始使用React Native (How to Get Started with React Native)
There are two quick easy ways to get started with React Native. Depending on your situation, one can be a better option for you.
有兩種快速簡便的方法可以開始使用React Native。 根據您的情況,一個可能是您更好的選擇。
Create React Native App- Similar to Create React App, it gets up and running using the terminal.
創建React Native應用程序 -與創建React App類似,它使用終端啟動并運行。
Expo - Best for prototyping an app or if it is earlier stage. Using Expo you can even create a quick app using drag and drop features from snack.expo.io in the browser.
博覽會 -最適合制作應用原型或處于早期階段的原型。 使用Expo,您甚至可以使用瀏覽器中Snack.expo.io的拖放功能來創建快速應用程序。
關于React Native的更多資源: (More resources on React Native:)
How to build mobile apps with React Native
如何使用React Native構建移動應用
Functional vs Class Components in React Native
React Native中的功能與類組件
How to test React Native Apps with Jest and Enzyme
如何使用Jest和Enzyme測試React Native Apps
翻譯自: https://www.freecodecamp.org/news/react-native-guide/