I have been working on a lot of mobile projects lately?—?including Cordova, PhoneGap, React Native, some Ionic and Swift?—?but I have to say, React Native is by far the best experience in mobile development I have had so far. It has great, web-like developer tools, lets me use NPM packages plus a lot of great react-native ones, and also produces faster, smoother apps than Cordova or Ionic. It shares the same workflow as a React application for the web which is pretty easy to reason about and find where things are quickly.

我最近一直在從事許多移動(dòng)項(xiàng)目的工作，包括Cordova，PhoneGap，React Native，一些Ionic和Swift，但是我不得不說，React Native是迄今為止迄今為止在移動(dòng)開發(fā)方面最好的經(jīng)驗(yàn)。 它具有出色的，類似于Web的開發(fā)人員工具，可讓我使用NPM軟件包以及許多出色的react-native軟件包，并且還比Cordova或Ionic生成更快，更流暢的應(yīng)用程序。 它與Web上的React應(yīng)用程序共享相同的工作流程，這很容易推理和快速找到問題所在。

Now I am building an app to gamify recycling in Indiana. I have a web app completed in alpha, however, the app required the use of geolocation, augmented reality, and some other features, so I am building a mobile app to complement the one for the web. Since the web app is in React, I figured it would be easier to build the Native version in iOS and Android at the same time using React Native.

現(xiàn)在，我正在構(gòu)建一個(gè)應(yīng)用程序，以游戲化印第安納州的回收利用。 我有一個(gè)用Alpha完成的Web應(yīng)用程序，但是該應(yīng)用程序需要使用地理位置，增強(qiáng)現(xiàn)實(shí)和其他一些功能，因此我正在構(gòu)建一款移動(dòng)應(yīng)用程序以補(bǔ)充該Web應(yīng)用程序。 由于該Web應(yīng)用程序位于React中，因此我認(rèn)為使用React Native在iOS和Android中同時(shí)構(gòu)建Native版本會(huì)更容易。

Here are some mockups to give you an idea.

這里有一些樣機(jī)可以給你一個(gè)想法。

設(shè)置React Native App (Setting Up the React Native App)

Where React Native outdoes React is on it’s simple set up for apps. One command creates a folder with all your Xcode and Android set up as well as a starter app ready for the emulator.

React Native勝過React的地方是它為應(yīng)用程序的簡單設(shè)置。 一個(gè)命令將創(chuàng)建一個(gè)文件夾，其中包含您所有的Xcode和Android設(shè)置以及一個(gè)可供模擬器使用的入門應(yīng)用程序。

Link to simple set up instructions.

鏈接到簡單的設(shè)置說明 。

After getting it to run in the simulator, I create a ‘src’ directory to put all my code in. Then I turn on live reload (command + D opens the dev menu on iOS and control + D on Android) and begin developing!

在模擬器中運(yùn)行它之后，我創(chuàng)建一個(gè)“ src”目錄來放入我的所有代碼。然后打開實(shí)時(shí)重新加載(在iOS上，命令+ D打開dev菜單，在Android上使用control + D)并開始開發(fā)！

A quick note about React-style applications: If you are new to this, it can feel a little strange to return your view from your .js files.

關(guān)于React風(fēng)格應(yīng)用程序的快速說明：如果您不熟悉此功能，從.js文件返回視圖可能會(huì)有些奇怪。

React, in its simplest form is a way to write modular, reusable code. Each component is broken down into sub components wherever it makes sense. Each component is encapsulated as a function or class in its own file, meaning you only import what you need. The function then return its view?—?the content to display on the screen from the component.

最簡單的形式React是一種編寫模塊化，可重用代碼的方法。 只要有意義，每個(gè)組件都會(huì)分解為子組件。 每個(gè)組件都作為函數(shù)或類封裝在其自己的文件中，這意味著您僅導(dǎo)入所需的內(nèi)容。 然后，該函數(shù)返回其視圖-內(nèi)容從組件顯示在屏幕上。

菜單和導(dǎo)航 (Menu and Navigation)

I have a menu on the web, but I need to change the location for mobile. I wanted the user to be able to swipe or click to open the menu. There are a surprising number of React Native libraries out there to cover most mobile needs.

我在網(wǎng)上有一個(gè)菜單，但是我需要更改手機(jī)的位置。 我希望用戶能夠滑動(dòng)或單擊以打開菜單。 有數(shù)量驚人的React Native庫可以滿足大多數(shù)移動(dòng)需求。

react-native-side-menu is a great little library that was pretty easy to set up. I tested out the swiping to make sure it was smooth and then added links to the side menu.

react-native-side-menu是一個(gè)很棒的小庫，很容易設(shè)置。 我測試了滑動(dòng)以確?；瑒?dòng)流暢，然后將鏈接添加到側(cè)面菜單。

RN doesn’t come with a built in navigation solution, so I added react-native-router-flux. It works great, even if you are not using a traditional flux (flux was similar in concept to Redux) state management system and it’s easy to set up.

RN沒有內(nèi)置的導(dǎo)航解決方案，因此我添加了react-native-router-flux 。 即使您沒有使用傳統(tǒng)的流量(流量在概念上與Redux類似)狀態(tài)管理系統(tǒng)，它也很有效，并且易于設(shè)置。

A Scene is a ‘view’ or a ‘page’ in the application (you can see how the navigation works together in the short video clip at the end). The titleattribute shows up in the header at the top, the key is used for navigating to the specific page, and the component is the actual Javascript file that contains the React Native component to display on that page. So, I created a component for each page with placeholder content:

Scene是應(yīng)用程序中的“視圖”或“頁面”(您可以在末尾的短片中看到導(dǎo)航的工作方式)。 title屬性顯示在頂部的標(biāo)題中，該key用于導(dǎo)航到特定頁面，該component是實(shí)際的Javascript文件，其中包含要在該頁面上顯示的React Native組件。 因此，我為每個(gè)帶有占位符內(nèi)容的頁面創(chuàng)建了一個(gè)組件：

Now, there is a menu and basic dummy pages and the user has the ability to navigate around the app. That was pretty quick and easy —I just installed a few modules and wrote a minimal amount of code.

現(xiàn)在，有一個(gè)菜單和基本的虛擬頁面，用戶可以在應(yīng)用程序中導(dǎo)航。 那是非常快速和容易的—我只安裝了幾個(gè)模塊并編寫了最少的代碼。

列表視圖 (List Views)

Most of the components I made I was able to copy from my web app and just update the UI.

我制作的大多數(shù)組件都可以從Web應(yīng)用程序復(fù)制并只需更新UI。

For this app, I have an ever-growing array of various characters that I wanted to display in a scrollable list on mobile. React Native offers ScrollView and ListView as build in solutions for handling infinite scroll.

對(duì)于這個(gè)應(yīng)用程序，我有各種各樣的字符，我想在移動(dòng)設(shè)備上的滾動(dòng)列表中顯示這些數(shù)組。 React Native提供ScrollView和ListView作為內(nèi)置解決方案來處理無限滾動(dòng)。

Each one of the animals above can be clicked on and viewed on an individual page:

上面的每個(gè)動(dòng)物都可以單擊并在單獨(dú)的頁面上查看：

I set the ‘Amici Info’ page as a scene in the router and populate it with the information of the creature that was clicked on.

我將“ Amici Info”頁面設(shè)置為路由器中的一個(gè)場景，并在其中填充了被單擊的生物的信息。

可重復(fù)使用的組件 (Reusable Components)

I can also make wrappers around components with styles and basic functionality of common mobile solutions. eg cards, I can update the colors and padding slightly for each project.

我還可以使用常見移動(dòng)解決方案的樣式和基本功能來圍繞組件包裝。 例如卡片，我可以為每個(gè)項(xiàng)目稍微更新顏色和填充。

通過Redux移植 (Porting Over Redux)

Fortunately, most of my redux and API calls are the same. The app doesn’t need quite as much data as the website, so I could remove a few functions.

幸運(yùn)的是，我的大多數(shù)redux和API調(diào)用都是相同的。 該應(yīng)用程序不需要與網(wǎng)站一樣多的數(shù)據(jù)，因此我可以刪除一些功能。

The only thing I am doing so far is fetching the character objects from DynamoDB (AWS).

到目前為止，我唯一要做的就是從DynamoDB(AWS)獲取字符對(duì)象。

This is the reducer to match this action:

這是匹配此操作的減速器：

That’s basically the state of Redux so far. I still have a lot more work to do on the Redux part but this is a good start. Next up: I need to set up a map component and display the locations for users to see.

到目前為止，這基本上是Redux的狀態(tài)。 在Redux方面，我還有很多工作要做，但這是一個(gè)好的開始。 下一步：我需要設(shè)置一個(gè)地圖組件并顯示位置以供用戶查看。

調(diào)試和開發(fā)工具 (Debugging and Dev Tools)

One of the best features of React Native is the dev tooling. Command + D gives me a dev menu:

React Native的最佳功能之一是開發(fā)工具。 Command + D給我一個(gè)開發(fā)菜單：

It’s one click to open up Chrome Developer Tools or use an inspector similar to the inspect element option when right-clicking in a browser.

在瀏覽器中單擊鼠標(biāo)右鍵時(shí)，只需單擊一下即可打開Chrome開發(fā)者工具或使用類似于inspect element選項(xiàng)的inspect element器。

結(jié)語 (Wrapping Up)

For an MVP, I think it’s coming along well so far.

對(duì)于MVP，我認(rèn)為到目前為止進(jìn)展順利。

I really enjoy working in React Native and I will continue to use it whenever possible until something better comes along.

我真的很喜歡在React Native中工作，我會(huì)盡可能繼續(xù)使用它，直到出現(xiàn)更好的情況為止。

If I’m missing any information in this article or you have any questions, let me know :)

如果我缺少本文中的任何信息，或者您有任何疑問，請(qǐng)告訴我 :)

翻譯自: https://www.freecodecamp.org/news/converting-a-react-app-to-react-native/

總結(jié)

以上是生活随笔為你收集整理的如何将React App转换为React Native的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。