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 —第一步
扫一扫
3329
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
