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.

我們應該希望找到真正的最佳解決方案。