如何将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是一种编写模块化，可重用代码的方法。 只要有意义，每个组件都会分解为子组件。 每个组件都作为函数或类封装在其自己的文件中，这意味着您仅导入所需的内容。 然后，该函数返回其视图-内容从组件显示在屏幕上。

菜单和导航 (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.

我在网上有一个菜单，但是我需要更改手机的位置。 我希望用户能够滑动或单击以打开菜单。 有数量惊人的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方面，我还有很多工作要做，但这是一个好的开始。 下一步：我需要设置一个地图组件并显示位置以供用户查看。

调试和开发工具 (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的最佳功能之一是开发工具。 Command + D给我一个开发菜单：

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.

在浏览器中单击鼠标右键时，只需单击一下即可打开Chrome开发者工具或使用类似于inspect element选项的inspect element器。

结语 (Wrapping Up)

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

对于MVP，我认为到目前为止进展顺利。

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

我真的很喜欢在React Native中工作，我会尽可能继续使用它，直到出现更好的情况为止。

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

如果我缺少本文中的任何信息，或者您有任何疑问，请告诉我 :)

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