這是我最喜歡的使用React Native創建生產級應用程序的技巧

Trust me when I say this, React Native is hard. And it’s not the usual hard of what we think hard is. It is hard in terms of working with in general. In this blog post, I’ll go over some tips and tricks and eventually the best practices I’ve deployed for one of my apps coded in React Native: codedamn Android (or codedamn iOS).

當我這樣說時請相信我，React Native很難。而且，這并不是我們很難想到的。從總體上講，這很難。在這篇博客文章中，我將介紹一些技巧和竅門，以及最終為在React Native中編碼的我的一個應用程序部署的最佳實踐： codedamn Android (或codedamn iOS )。

Hi! My name is Mehul. I’m a student, youtuber, fullstack developer, app developer and can deploy servers as well. Recently, I decided to launch a developer focused platform (you guessed it right, codedamn). To get it off the ground real quick on mobile devices, I went with React Native. Partly because I’m not a huge fan of Swift and Xcode for now. But little did I know that I’d be interacting more with native code than I thought. Anyway, let’s begin with the information I want to mention.

嗨！我叫Mehul。我是一名學生， youtuber ，全棧開發人員，應用程序開發人員，也可以部署服務器。最近，我決定啟動一個以開發人員為中心的平臺(代碼猜錯了，您猜對了)。為了在移動設備上快速真正地投入使用，我選擇了React Native。部分原因是我暫時不喜歡Swift和Xcode。但是我幾乎不知道我會與本機代碼進行比我想像的更多的交互。無論如何，讓我們從我要提及的信息開始。

Note: At the time of writing this article, React Native was at v0.57-rc4. Check if some of the things are already available/fixed in recent React Native version!

注意：在撰寫本文時，React Native的版本為v0.57-rc4。 檢查某些事情在最新的React Native版本中是否已經可用/已修復！

0：知道你在做什么 (0: Know what you’re doing)

Realize that the React Native world is a lonely world right now. You might get yourself into a problem which no one has faced till now (or you’re not able to google it properly). Always keep VCS up with your native project and regularly commit your changes (all the cool kids call it CI). It helps you to revert back to the last working copy pretty quickly without losing a lot of code.

意識到React Native世界現在是一個孤獨的世界。您可能會陷入一個迄今為止沒有人遇到過的問題(或者您無法正確搜索該問題)。始終使VCS與您的本機項目保持一致，并定期提交更改(所有很棒的孩子都將其稱為CI)。它可以幫助您快速恢復到上一個??工作副本，而不會丟失很多代碼。

It is equally important to know what you’re doing. You might end up breaking your project completely if you’re unaware. If you did not use a VCS, well then you are in trouble.

知道自己在做什么同樣重要。如果您不知道，您可能最終會完全破壞您的項目。如果您沒有使用VCS，那么您將遇到麻煩。

1：升級您的JSC (1: Upgrade your JSC)

JSC (JavaScriptCore) is a webkit based JavaScript engine used by React Native on Android platforms to evaluate your JavaScript code. Don’t tell me you thought that React Native converts JavaScript into native code. It doesn’t! ;-)

JSC(JavaScriptCore)是基于WebkitJavaScript引擎，React Native在Android平臺上使用它來評估您JavaScript代碼。不要告訴我您認為React Native將JavaScript轉換為本地代碼。不是！ ;-)

Whatever JS you write is still executed as JavaScript only by JSC on Android. The problem is React Native ships with a very old version of JSC. This means you have to use babel transformations extensively. Sometimes there are bugs so nasty you’ll pull your hair every time you sit to code, because of an older version of JSC.

無論您編寫什么JS，仍然只能由Android上的JSC作為JavaScript執行。問題是React Native附帶了非常舊的JSC版本。這意味著您必須廣泛使用babel轉換。有時，由于JSC的版本較舊，您有時每次都坐下來編寫代碼時會感到非常討厭，以至于無法忍受。

I learned it the hard way after wasting a day of debugging. There was an unknown random fatal error in between app execution. After studying the logs for quite some time, I came to a conclusion that the app was crashing somewhere where [Symbol.iterator] is used in the transpiled JS code by babel.

在浪費了一天的調試時間后，我很難學了。應用執行之間存在未知的隨機致命錯誤。在研究日志一段時間后，我得出一個結論，該應用程序崩潰了，Babel在轉譯的JS代碼中使用了[Symbol.iterator]。

Now, Symbols is an ES6 thing. Babel did not transpile this further, and JSC was so old it wasn’t able to hold up simple things like these and crashed. I wasted almost a day behind figuring out that JSC upgrade was a better solution than other patchy hacks.

現在，Symbols是ES6。 Babel并沒有進一步傳播它，而JSC太老了，以至于無法忍受像這樣的簡單事情而崩潰了。我花了將近一天的時間弄清楚JSC升級是比其他補丁程序更好的解決方案。

Upgrading your JSC is pretty straightforward. Follow this github repo and you should be up and running in no time.

升級JSC非常簡單。按照此github存儲庫操作，您應該立即啟動并運行。

2：正確設置Redux (2: Setup Redux correctly)

Redux can be a pain to setup correctly. And by setting it up correctly, I mean integrating it deeply with your app. Whether it is your own reducers or whether it is React navigation. Setting up react navigation with Redux is a great decision for the long-term even though the React navigation page gives a warning about this:

Redux可能難以正確設置。通過正確設置，我的意思是將其與您的應用程序深度集成。無論是您自己的減速器還是React導航。從長期來看，使用Redux設置React導航是一個不錯的選擇，即使React導航頁面對此提供警告：

Heck no. We’re talking about enterprise and production level apps here. Go ahead and store your navigation state in Redux and gain very fine control over your state.

哎呀我們在這里談論企業和生產級應用程序。繼續并將您的導航狀態存儲在Redux中，并可以很好地控制您的狀態。

But remember, with great power comes great responsibility. With such fine control over your navigation, make sure you set it up correctly. Or else your app will randomly crash. It’s going to be a pain to set it up initially, but trust me its worth the time.

但是請記住，強大的力量伴隨著巨大的責任。通過對導航的這種精細控制，請確保正確設置了它。否則您的應用將隨機崩潰。最初設置它會很痛苦，但是請相信我，值得您花時間。

Read about Redux and its integration with react navigation here.

在此處閱讀有關Redux及其與react導航的集成的信息。

3：使用可用的自動化工具，例如fastlane (3: Use available automation tools like fastlane)

Fastlane is a great command line utility for automating a lot of common tasks you’ll encounter. It is more like time optimization rather than code optimization. I think it deserves a spot here because it saves a lot of time once setup correctly.

Fastlane是一個很棒的命令行實用工具，用于自動執行許多常見任務。它更像是時間優化而不是代碼優化。我認為這里值得一試，因為正確設置后可以節省很多時間。

Checkout fastlane here: https://fastlane.tools/

在此處結帳Fastlane： https ： //fastlane.tools/

4：正確處理錯誤 (4: Do error handling correctly)

Don’t expect your users to ping you with exactly how the app crashes. With more complex apps, it is difficult to find specific steps which lead to the app crash. I use sentry.io for error handling on my apps, and I personally like it a lot. It can hook up in your build steps and even upload the sourcemap to their servers so you can see the actual code, not random garbage in your crash traces.

不要期望您的用戶對您的應用崩潰的確切方式進行ping。對于更復雜的應用程序，很難找到導致應用程序崩潰的特定步驟。我使用sentry.io來處理我的應用程序中的錯誤，我個人非常喜歡它。它可以連接您的構建步驟，甚至可以將源映射上傳到它們的服務器，以便您可以查看實際代碼，而不是崩潰跟蹤中的隨機垃圾。

Sentry is available at https://sentry.io/

Sentry可通過https://sentry.io/獲得

5：以正確的方式調試！ (5: Do debugging the right way!)

Are you still using that fancy chrome inspect console to debug your React Native apps? And how about Redux? Another tab? What if you want to clear the async storage of your app? Force stop the app and clear data? Seems too tedious especially when you’re actively developing the application. Instead, use a standalone dedicated debugger for react native. Best part? It’s free!

您是否仍在使用該高級chrome檢查控制臺來調試React Native應用程序？那Redux呢？另一個標簽？如果您想清除應用程序的異步存儲該怎么辦？強制停止應用程序并清除數據？似乎太繁瑣，尤其是在您積極開發應用程序時。相反，請使用獨立的專用調試器來響應本機。最好的部分？免費！

Here’s your React Native debugger: https://github.com/jhen0409/react-native-debugger

這是您的React Native調試器： https : //github.com/jhen0409/react-native-debugger

5個快速提示： (5 quick tips:)

Keep your file structure organized. It is very important to scale your application.
保持文件結構井井有條。擴展應用程序非常重要。
Avoid using expo for your apps. PLEASE NO. Even if you use it you’ll realize you HAVE to eject at some point, and then good luck figuring out all the mess. It’s not impossible, it will eat a lot of your time later on. Remember, expo is good but we’re talking about long-term business/startup related apps and not a cat age app (for which expo would be good).
避免將expo用于您的應用程序。請不。即使使用它，您也會意識到自己必須在某個時候彈出，然后祝您好運。這不是不可能，它將在以后花費很多時間。請記住，expo很好，但是我們在談論的是長期業務/啟動相關的應用程序，而不是貓膩的應用程序(對于expo來說這是個不錯的選擇)。
MAKE SURE to create a package-lock.json file (if using npm). You’ll regret it a big time later when you accidentally remove your node_modules folder and realize no package on npm cares about semantic versioning.
確保創建一個package-lock.json文件(如果使用npm)。當您不小心刪除了node_modules文件夾并且意識到npm上的任何軟件包都不關心語義版本時，您會后悔了很長時間。
Do not use very heavy UI libraries with React Native. It slows down performance even in production. I do not recommend NativeBase as of now, even though it seems very fancy in terms of UI. It’s expensive on performance. There are much better options available like react native paper.
不要在React Native中使用非常繁瑣的UI庫。即使在生產中，它也會降低性能。我現在不建議您使用NativeBase ，即使就UI而言，它似乎也很不錯。性能上很昂貴。有很多更好的選擇，例如React Native Paper 。

Thanks to
謝謝

Andre Biel for the comment, please make sure to review this doc page thoroughly if you’re tired of slow RN apps and/or profiling them. It is a goldmine: https://facebook.github.io/react-native/docs/performance.html
安德烈·比爾 ( Andre Biel)發表評論，如果您對緩慢的RN應用程序和/或對其進行性能分析感到厭倦，請確保徹底閱讀此文檔頁面。這是一個金礦： https : //facebook.github.io/react-native/docs/performance.html
Take advantage of React Native’s replacing JS bundle on the fly without re-submitting the app to app stores using technologies like CodePush.
利用React Native即時替換JS軟件包的優勢，而無需使用CodePush之類的技術將應用重新提交給應用商店。
Get comfortable with at least the basics of native code on both platforms. Especially the build files on Android and pod files on iOS. Those are some files you’ll spend most of your spending-time-on-native time on.
至少熟悉兩個平臺上的本機代碼基礎。尤其是Android上的構建文件和iOS上的pod文件。這些是您將大部分時間花在本機上的文件。

I will continue to write blog posts on React Native as a series of posts, maybe, let’s see!

我將繼續在React Native上寫博客文章，作為一系列文章，也許吧！

有什么問題嗎 (Questions?)

Ask away in the comments below! I’ll be happy to help.

在下面的評論中提問！我很樂意提供幫助。

Quick shameless plug: If you’re getting started with React Native, here’s my 95% off course on how to get started with it: React Native — The First Steps

快速無恥的插件： 如果您要開始使用React Native，這是我入門的95％課程： React Native —第一步