如何將React App轉換為React Native

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.

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

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.

現在，我正在構建一個應用程序，以游戲化印第安納州的回收利用。我有一個用Alpha完成的Web應用程序，但是該應用程序需要使用地理位置，增強現實和其他一些功能，因此我正在構建一款移動應用程序以補充該Web應用程序。由于該Web應用程序位于React中，因此我認為使用React Native在iOS和Android中同時構建Native版本會更容易。

Here are some mockups to give you an idea.

這里有一些樣機可以給你一個想法。

設置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的地方是它為應用程序的簡單設置。一個命令將創建一個文件夾，其中包含您所有的Xcode和Android設置以及一個可供模擬器使用的入門應用程序。

Link to simple set up instructions.

鏈接到簡單的設置說明。

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!

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

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.

關于React風格應用程序的快速說明：如果您不熟悉此功能，從.js文件返回視圖可能會有些奇怪。

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是一種編寫模塊化，可重用代碼的方法。只要有意義，每個組件都會分解為子組件。每個組件都作為函數或類封裝在其自己的文件中，這意味著您僅導入所需的內容。然后，該函數返回其視圖-內容從組件顯示在屏幕上。

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.

我在網上有一個菜單，但是我需要更改手機的位置。我希望用戶能夠滑動或單擊以打開菜單。有數量驚人的React Native庫可以滿足大多數移動需求。

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是一個很棒的小庫，很容易設置。我測試了滑動以確保滑動流暢，然后將鏈接添加到側面菜單。

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沒有內置的導航解決方案，因此我添加了react-native-router-flux 。即使您沒有使用傳統的流量(流量在概念上與Redux類似)狀態管理系統，它也很有效，并且易于設置。

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是應用程序中的“視圖”或“頁面”(您可以在末尾的短片中看到導航的工作方式)。 title屬性顯示在頂部的標題中，該key用于導航到特定頁面，該component是實際的Javascript文件，其中包含要在該頁面上顯示的React Native組件。因此，我為每個帶有占位符內容的頁面創建了一個組件：

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.

現在，有一個菜單和基本的虛擬頁面，用戶可以在應用程序中導航。那是非常快速和容易的—我只安裝了幾個模塊并編寫了最少的代碼。

列表視圖 (List Views)

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

我制作的大多數組件都可以從Web應用程序復制并只需更新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.

對于這個應用程序，我有各種各樣的字符，我想在移動設備上的滾動列表中顯示這些數組。 React Native提供ScrollView和ListView作為內置解決方案來處理無限滾動。

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

上面的每個動物都可以單擊并在單獨的頁面上查看：

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”頁面設置為路由器中的一個場景，并在其中填充了被單擊的生物的信息。

可重復使用的組件 (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.

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

通過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.

幸運的是，我的大多數redux和API調用都是相同的。該應用程序不需要與網站一樣多的數據，因此我可以刪除一些功能。

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

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

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的狀態。在Redux方面，我還有很多工作要做，但這是一個好的開始。 下一步：我需要設置一個地圖組件并顯示位置以供用戶查看。