最近我一直在做很多移动项目，包括Cordova、PhoneGap、React Native、一些Ionic和Swif，但我不得不说，React Native是迄今为止我在移动开发方面最好的体验。它有很棒的、类似web的开发工具，让我可以使用NPM包以及许多很棒的react-native包，并且还可以生成比Cordova或Ionic更快、更流畅的app。它与Web的Reactapp序共享相同的工作流程，这很容易推理和快速找到事情的位置。

现在我正在开发一个应用程序来游戏化回收利用。我有一个在Alpha阶段完成的网络应用程序，但是，该应用程序需要使用地理定位、增强现实和其他一些功能，所以我正在构建一个移动应用程序来补充网络应用程序。由于Web应用程序使用React，我认为使用React Native同时在iOS和Android中构建Native版本会更容易。

这里有一些模型可以给你一个想法。

设置React Native应用程序

React Native优于React的地方在于它为应用程序设置简单。一个命令会创建一个文件夹，其中包含您所有的Xcode和Android设置以及一个为模拟器准备的入门应用程序。

链接到简单的设置说明。

让它在模拟器中运行后，我创建了一个“src”目录来放置我的所有代码。然后我打开实时重新加载（command + D打开iOS上的dev菜单和control + D在Android上）并开始开发！

.js关于React风格应用程序的快速说明：如果您是新手，从文件中返回视图会感觉有点奇怪。

React，以其最简单的形式是一种编写模块化、可重用代码的方法。每个组件在有意义的地方都被分解为子组件。每个组件都作为函数或类封装在自己的文件中，这意味着您只需导入您需要的内容。然后该函数返回它的视图，从组件显示在屏幕上的内容。

菜单和导航

我在网络上有一个菜单，但我需要更改移动设备的位置。我希望用户能够滑动或单击以打开菜单。有数量惊人的React Native库可以满足大多数移动需求。

react-native-side-menu是一个很棒的小库，很容易设置。我测试了滑动以确保它流畅，然后将链接添加到侧边菜单。

RN没有内置导航解决方案，所以我添加了react-native-router-flux。即使您不使用传统的Flux（flux在概念上与Redux类似）状态管理系统，它也能很好地工作，而且它很容易设置。

AScene是应用程序中的“视图”或“页面”（您可以在最后的短视频剪辑中看到导航如何协同工作）。该title属性显示在顶部的标题中，key用于导航到特定页面，并且component是包含要在该页面上显示的React Native组件的实际Javascript文件。因此，我为每个页面创建了一个包含占位符内容的组件：

现在，有一个菜单和基本的虚拟页面，用户可以在应用程序中导航。这非常快速和简单，我只安装了几个模块并编写了最少量的代码。

列表视图

我制作的大部分组件都可以从我的Web应用程序中复制并更新UI。

对于这个应用程序，我有一个不断增长的各种字符数组，我想在移动设备上的可滚动列表中显示它们。React Native提供了ScrollView和ListView作为处理无限滚动的内置解决方案。

我将“Amici Info”页面设置为路由器中的一个场景，并用被点击的生物的信息填充它。

可重用组件

我还可以使用常见移动解决方案的样式和基本功能围绕组件制作包装器。例如卡片，我可以为每个项目稍微更新颜色和填充。

通过Redux移植

幸运的是，我的大部分redux和API调用都是一样的。该应用程序不需要与网站一样多的数据，因此我可以删除一些功能。

到目前为止，我唯一要做的就是从DynamoDB (AWS)中获取字符对象。

这是匹配此操作的减速器：

到目前为止，这基本上是Redux的状态。在Redux部分我还有很多工作要做，但这是一个好的开始。接下来：我需要设置一个地图组件并显示位置供用户查看。

调试和开发工具

React Native的最佳特性之一是开发工具。Command + D给了我一个开发菜单：

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

总结

我认为到目前为止进展顺利。我喜欢在React Native中工作，我会尽可能地继续使用它，直到出现更好的东西。