构建了我的第一个React Native应用程序之后，我现在确信这是未来。-CSDN博客

by Taylor Milliman

泰勒·米利曼(Taylor Milliman)

构建了我的第一个React Native应用程序之后，我现在确信这是未来。 (After building my first React Native app, I’m now convinced it’s the future.)

After a few weeks of playing around with React Native, I just came away with my first real mobile app. It’s fairly simple, but it only took me a few days to build and I had a blast doing it.

在使用React Native玩了几周之后，我才有了第一个真正的移动应用程序。这很简单，但是我只花了几天的时间就完成了开发工作。

I created a mobile app for my favorite food blog, Smitten Kitchen.

我为我最喜欢的美食博客Smitten Kitchen创建了一个移动应用程序。

The app allows users to search through a database of over 1,000 recipes, and concisely view the necessary ingredients and directions for each one.

该应用程序允许用户搜索包含1000多个食谱的数据库，并简洁地查看每个食谱的必要成分和说明。

Users can also bookmark recipes and easily share them with a friend.

用户还可以为食谱添加书签，并轻松与朋友分享。

I’m still waiting for permission from the blog to publish this app, but you can check out all of the code here. Note that the url for my API has been stubbed for the time being out of respect for Smitten Kitchen.

我仍在等待博客的许可以发布此应用，但是您可以在此处查看所有代码。请注意，出于对Smitten Kitchen的尊重，我的API的网址已被暂时删除。

React Native不会很快消失 (React Native isn’t going away any time soon)

A common reservation among developers is that they don’t want to invest the time to learn a new technology if there’s a strong chance it will become obsolete in the near future.

开发人员的共同保留意见是，如果有很大的机会在不久的将来过时，他们就不想花时间学习新技术。

Even from my relatively minimal experience with React Native, I’ve found it to be an enormously powerful tool. I am confident it will be used in the years to come.

即使从相对最少的React Native经验中，我也发现它是一个非常强大的工具。我相信它将在未来几年中使用。

Facebook, Instagram, and Airbnb all built the latest versions of their mobile apps using React Native. And here’s a list of the some other popular apps that were built using it.

Facebook，Instagram和Airbnb都使用React Native构建了最新版本的移动应用程序。这是使用它构建的其他一些流行应用的列表。

Jeff Meyerson, creator of the podcast Software Engineering Daily, has talked extensively about the React Native platform. He believes it will survive and continue to capture the majority of the mobile ecosystem.

播客软件工程日报的创建者Jeff Meyerson广泛讨论了React Native平台。他认为，这种技术将生存并继续占领大多数移动生态系统。

He has even speculated that Facebook may be creating their own mobile phone, which would be built specifically to support apps made with React Native.

他甚至推测，Facebook可能正在制造自己的手机，该手机将专门为支持使用React Native制作的应用而制造。

React Native与其他跨平台工具有何不同 (How React Native is different from other cross-platform tools)

If you’re new to React Native, it’s an open source project started by Facebook. It allows developers to build cross-platform mobile apps using JavaScript. It works very similarly to React, Facebook’s popular JavaScript library for building single page web applications.

如果您是React Native的新手，那么这是一个由Facebook启动的开源项目。它允许开发人员使用JavaScript构建跨平台的移动应用程序。它的工作原理与React十分相似，它是Facebook流行JavaScript库，用于构建单页Web应用程序。

I’ve always been skeptical of tools that advertise themselves as cross-platform for mobile. All too often you end up with a look, feel, and performance that doesn’t quite match the native platform.

我一直对那些宣传自己为移动平台的跨平台工具持怀疑态度。通常，您最终会获得与本地平台不完全匹配的外观，感觉和性能。

React Native is not like other mobile app development frameworks, such as Ionic or Cordova. Those run inside of a web view, or an “HTML5 app,” or a “hybrid app.”

React Native与其他移动应用程序开发框架(例如Ionic或Cordova)不同。它们在网络视图，“ HTML5应用”或“混合应用”中运行。

You build a high performance mobile app that is indistinguishable from one that is built using Swift/Objective-C or Java.

您构建的高性能移动应用程序与使用Swift / Objective-C或Java构建的应用程序没有区别。

That being said, it is still important to understand the intricacies and differences between platforms. The user experience for Android and iOS are fundamentally different, and you still need to build your app in a way that will feel natural on both platforms.

话虽如此，理解平台之间的复杂性和差异仍然很重要。 Android和iOS的用户体验在根本上是不同的，并且您仍然需要以在两种平台上都感觉自然的方式构建应用程序。

In addition, if there is ever a feature that you need to add that is not yet supported by the React Native library, React Native makes it easy to write your own Native Module in the corresponding language, which can then be linked to your React Native codebase.

另外，如果有需要添加的功能，而React Native库尚不支持，则React Native可以轻松地以相应的语言编写自己的Native模块，然后可以将其链接到React Native代码库。

如何开始 (How To Get Started)

Personally, I used this Udemy course to get started. It served as a nice refresher of react and redux, and was helpful for getting setup.

我个人是使用Udemy课程来开始学习的。它充当了React和Redux的不错的复习，并有助于进行设置。

And recently Facebook released Create React Native App. This tool further simplifies the initial setup process.

最近，Facebook发布了Create React Native App 。该工具进一步简化了初始设置过程。

If you’re already familiar with React, you can probably dive straight into the documentation. For only $10 however, the course is a bargain and walks you through the process of making four mobile apps as well as common components that you can reuse in future projects.

如果您已经熟悉React，可以直接阅读文档。但是，只需花费10美元，这门课程就可以讲价，并且引导您完成制作四个移动应用程序以及可以在将来的项目中重用的通用组件的过程。

Udemy also offers a course covering Advanced React Native Concepts, for those already familiar with the platform.

Udemy还为已经熟悉该平台的人员提供了涵盖Advanced React Native概念的课程。

在React Native中样式化 (Styling in React Native)

Styling in React Native takes some getting used to. React Native heavily uses CSS flexbox, something that I was not particularly comfortable with, even coming from a web background.

React Native的样式需要一些习惯。 React Native大量使用CSS flexbox，我对此不太满意，甚至来自网络背景。

Luckily there are already some fantastic resources to learn about flexbox:

幸运的是，已经有了一些很棒的资源来学习flexbox：

How flexbox works — explained with big, colorful, animated gifs

flexbox的工作原理-用大尺寸，彩色动画gif进行解释

React Native Layout Examples

React Native布局示例

A fun game to help you practice: Flexbox Froggy

一个有趣的游戏可以帮助您练习： Flexbox Froggy

After working with React Native for a few weeks, I now have a much better understanding of flexbox, which I can apply to my next web project.

在与React Native一起工作了几周之后，我现在对Flexbox有了更好的了解，我可以将其应用于下一个Web项目。

The current best practice is to create a styles object for each component, then apply it via inline-styles. Keep in mind that you are not actually writing CSS, so the naming of properties is a little different as well.

当前的最佳实践是为每个组件创建一个样式对象，然后通过内联样式应用它。请记住，您实际上并不是在编写CSS，因此属性的命名也有所不同。

Another key difference is that you cannot use HTML tags in your javascript, because you are writing code to run on a phone, rather than in a browser. Instead, components are built with a set of base level components provided by the React Native library.

另一个主要区别是您不能在javascript中使用HTML标记，因为您正在编写要在手机而非浏览器上运行的代码。相反，组件是由React Native库提供的一组基本级别的组件构建的。

It takes a little getting used to, but before you know it you’ll find yourself accidentally using a <View>&lt;/View> tag in place of a <div></div> in your next web app.

这需要一点时间来适应，但是在您不了解它之前，会发现自己不小心在下一个Web应用程序中使用<View>& lt; / View>标记place of a <div> </ div>。

To get a better feel for how all of this works, take a peek at the code for a simple button component below.

为了更好地了解所有这些工作原理，请看一下下面的简单按钮组件的代码。

Here’s the GitHub gist.

这是GitHub要点。

Navigation is one of the few areas of React Native where there is not a consensus on a clear solution.

导航是React Native少数几个在清晰解决方案上尚未达成共识的领域之一。

React Router has become the standard library of choice for the React community, but there are a number of libraries floating around in the React Native community.

React Router已经成为React社区的标准库选择，但是React Native社区中有很多库在浮动。

Personally I used the React Native Router Flux library for my project which worked just fine. But I can see how you might run into some bigger issues on more complex projects.

我个人在我的项目中使用了React Native Router Flux库，效果很好。但是我可以看到您可能会在更复杂的项目中遇到一些更大的问题。

Luckily, React Native has already developed a massive community. New versions of the project are released every month, so I am confident that issues like navigation will be solved over time.

幸运的是，React Native已经建立了一个庞大的社区。该项目的新版本每个月都会发布，因此我相信随着时间的推移，导航等问题将得到解决。

开发人员体验事项 (Developer Experience Matters)

The ability to share code between Android and iOS applications is undoubtedly a draw of React Native, but it is only a small part of what makes the tool so incredible.

在Android和iOS应用程序之间共享代码的能力无疑是React Native的一大特色，但这只是使该工具如此令人难以置信的一小部分。

My favorite part of using React Native is the ability to reload immediately. I have used Android Studio in the past, and commonly had to deal with 30–60 second build times.

使用React Native时，我最喜欢的部分是能够立即重新加载。我过去使用过Android Studio，通常不得不处理30–60秒的构建时间。

This saves time and I found it easier to get into a flow state without those pesky build times to disrupt me.

这样可以节省时间，而且我发现更容易进入流程状态，而没有那些烦人的构建时间来打扰我。

React Native makes mobile development fun again, and that alone is enough of a reason to try it out for your next project.

React Native使移动开发再次变得有趣，仅此一个理由就足以在下一个项目中进行尝试。

愿意探索 (Be Willing To Explore)

React Native is a perfect example of what can happen when we apply ideas that have proven successful in one area of software (web), to a seemingly separate area (mobile).

当我们将在某个软件领域(网络)中已被证明成功的想法应用到看似独立的领域(移动设备)时，React Native就是一个很好的例子。

As Haseeb Quereshi convincingly argued in his talk on convergence, as software engineers we should be converging on certain principles, languages and tools that can be successfully applied universally.

正如Haseeb Quereshi在关于融合的演讲中令人信服地指出的那样，作为软件工程师，我们应该集中在可以成功普遍应用的某些原理，语言和工具上。

We should want to find what really is the optimal solution.

我们应该希望找到真正的最佳解决方案。