在React Native中开始构建移动应用程序所需的知识

Nothing is better than building apps with JavaScript. Unless you are building mobile apps. JavaScript is for building web apps, and using it to build native mobile app used to not be possible. It was hard for any web developer to dive into building native mobile apps. They have to learn Java, or Objective-C …or any programming language that was used for this purpose.

没有什么比使用JavaScript构建应用更好的了。 除非您正在构建移动应用程序。 JavaScript用于构建Web应用程序，而以前无法使用JavaScript来构建本机移动应用程序。 对于任何Web开发人员来说，都很难投入到构建本机移动应用程序中。 他们必须学习Java或Objective-C…或用于此目的的任何编程语言。

That is, until Facebook’s React Native broke this barrier. React Native comes with great advantages like building cross-platform apps for both Android and IOS. Before React Native, you had to write your code twice — one for Android and one for IOS. That’s no longer the case.

也就是说，直到Facebook的React Native打破了这一壁垒。 React Native具有巨大的优势，例如为Android和IOS构建跨平台应用程序。 在使用React Native之前，您必须编写两次代码—一种用于Android，另一种用于IOS。 情况不再如此。

This article is an intro to the world of React Native, so get ready ?.

本文是React Native的介绍，所以准备好了吗？

为什么要使用Native？ (Why React Native?)

Right, so why React native and not any other technology?

是的，为什么要使用React本机而不是其他任何技术？

It gives us many solutions that other technologies can not afford. Here is what you can do with React Native:

它为我们提供了许多其他技术无法承担的解决方案。 这是您可以使用React Native进行的操作：

构建本地移动应用 (Building native mobile apps)

React Native allows us to write native apps in JavaScript for both iOS and Android. It gives us the ability to use all the native components like gestures, push notifications, camera, and location. There are some other JavaScript libraries for building mobile apps like ionic or PhoneGap. But those libraries use Webview, and the apps built with those technologies are not native.

React Native允许我们使用JavaScript编写适用于iOS和Android的本地应用程序。 它使我们能够使用所有本机组件，例如手势，推送通知，摄像头和位置。 还有其他一些JavaScript库可用于构建诸如ionic或PhoneGap之类的移动应用程序。 但是这些库使用Webview，并且使用这些技术构建的应用程序不是本机的。

构建跨平台的移动应用(iOS和Android) (Building cross platform mobile apps (iOS and Android))

Yeah, with React Native you can build mobile apps that can run on iOS and Android. This is one of the great benefits of React Native. Before Facebook created it, you had to build your app twice and with different code: one for iOS using Swift or Objective-C and one for Android using Java or Kotlin. React Native solved this problem so you can build your React Native app and it will work in iOS and Android. Awesome! ?

是的，使用React Native，您可以构建可在iOS和Android上运行的移动应用程序。 这是React Native的巨大好处之一。 在Facebook创建它之前，您必须使用不同的代码来构建应用程序两次：一个用于使用Swift或Objective-C的iOS，另一个用于使用Java或Kotlin的Android。 React Native解决了这个问题，因此您可以构建自己的React Native应用，它可以在iOS和Android中使用。 太棒了！ ？

全部用JavaScript和React编写代码 (Write your code all in JavaScript and React)

While you are building React Native apps, you will actually write JavaScript. Reactjs code allows us to build great UI and user experience components.

在构建React Native应用程序时，实际上将编写JavaScript。 Reactjs代码使我们能够构建出色的UI和用户体验组件。

react-native入门 (Getting started with react-native)

Starting with react-native can be exciting, but at the same can be a bit confusing. The first step is to install it, and there are several ways to do it:

从本机React开始可能会令人兴奋，但同时可能会有些混乱。 第一步是安装它，有几种方法可以做到：

使用expo-cli： (Using expo-cli:)

expo-cli is a command line tool. It downloads and installs the React Native boilerplate for you, integrated with expo API (check here for installation guide). It’s an easy way to build a React Native app, and it’s the recommended way if you’ve just started with React Native.

expo-cli是一个命令行工具。 它会为您下载并安装与expo API集成的React Native样板文件( 请参阅此处以获取安装指南 )。 这是构建React Native应用程序的简便方法，如果您刚开始使用React Native，则推荐使用此方法。

expo-cli gives you many options. You can run and test your application on a mobile device without any configuration. Scan a QR code and your app will open up with expo mobile app. You can explore other mobile applications built with React Native on the browser over a web interface called appertize!

expo-cli给您很多选择。 您无需任何配置即可在移动设备上运行和测试您的应用程序。 扫描QR码，您的应用将通过expo mobile应用打开。 您可以通过名为appertize的Web界面在浏览器上浏览其他使用React Native构建的移动应用程序！

使用react-native-cli (Using react-native-cli)

The react-native-cli does the same job as expo-cli, but with a different approach and extra advantages. The apps that are installed with react-native-cli provide us the option and the ability to create our own native modules in our app. You don’t need to eject your application to be able to make native modules. Ejecting makes you able to use native modules and write you own (we will explore how to write native modules in another part).

ract-native-cli的功能与expo-cli相同，但是方法不同且具有其他优势。 与react-native-cli一起安装的应用程序为我们提供了选择并能够在我们的应用程序中创建我们自己的本机模块。 您无需退出应用程序即可制作本机模块。 弹出使您能够使用本机模块并编写自己的模块( 我们将在另一部分中探讨如何编写本机模块 )。

Developing React Native apps on different platforms is a different process. Some times we need some specific configuration for a specific platform. For example to build for Android, you need to use the Android SDK, so let’s explore how this works!

在不同平台上开发React Native应用程序是一个不同的过程。 有时我们需要针对特定​​平台的特定配置。 例如，要为Android进行构建，您需要使用Android SDK，因此让我们探索一下它是如何工作的！

为Android构建移动应用 (Building mobile apps for Android)

There are some requirements you need to install to start developing for Android. First, you have to download and configure both Android SDK and Android Studio. You can download them with this link here.

您需要安装一些要求才能开始为Android开发。 首先，您必须下载并配置Android SDK和Android Studio。 您可以在此处通过此链接下载它们。

After downloading Android Studio you need to install some APIs as well. To do that open Android Studio, then click settings tab this window will open up:

下载Android Studio之后，您还需要安装一些API。 为此，请打开Android Studio，然后单击“设置”标签，此窗口将打开：

First, check ✔️the platform you want your react-native to support in the SDK Platforms tab (for example Android 6.0 Marshmallow). Then switch to SDK tools.

首先，在“ SDK平台”选项卡中检查✔️想要您的本机支持的平台(例如Android 6.0 Marshmallow)。 然后切换到SDK工具。

And check Android SDK Build-Tools, Android SDK tools, and google play service. Under Android SDK Build-Tools select all the platforms:

并检查Android SDK Build-Tools ， Android SDK tools和google play service 。 在Android SDK Build-Tools下，选择所有平台：

• Starting from 19.0.0 to 20.0.0
  从19.0.0到20.0.0
• From 22.0.0 to 24.0.0
  从22.0.0到24.0.0
• And 25.0.2 , 26.0.1 to 26.0.3
  和25.0.2，26.0.1至26.0.3
• 27.0.3 and 28.0.1 to 28.02
  27.0.3和28.0.1至28.02

Now we are done with SDK and Android Studio. The next step is the emulator. The emulator (or the simulator) is where we have to run and test our app. There are many different choices.

现在我们完成了SDK和Android Studio。 下一步是模拟器。 模拟器(或模拟器)是我们必须运行和测试应用程序的地方。 有很多不同的选择。

You can use Android Studio emulators. You check here how to create an emulator to use on Android Studio. Honestly I never used them. I prefer Genymotion or a real device instead.

您可以使用Android Studio模拟器。 您在此处检查如何创建在Android Studio上使用的仿真器 。 老实说，我从未使用过它们。 我更喜欢Genymotion或真实的设备。

Genymotion (Genymotion)

Genymotion is a desktop application that provides a virtual emulator to test your application. I like to use it a lot because it’s fast. ? It gives you options to create a customized phone with the features that you can find in any real device. For example enable Wifi, Location, and Camera. I highly recommend you use Genymotion over Android Studio emulators or any other emulator.

Genymotion是一个桌面应用程序，提供了虚拟模拟器来测试您的应用程序。 我喜欢经常使用它，因为它速度很快。 ？ 它为您提供了创建具有任何实际设备中的功能的定制电话的选项。 例如，启用Wifi，位置和摄像头。 我强烈建议您在Android Studio模拟器或任何其他模拟器上使用G enymotion 。

使用真实设备 (Using real devices)

Nothing is better that using real devices to run and test your app. This is because it lets you knows how you application looks like on a real device. It makes you feel the reality of your work in a way the virtual device doesn’t give. So if you have the ability to use a device, don’t hesitate.

没有什么比使用真实的设备运行和测试您的应用更好。 这是因为它使您知道应用程序在真实设备上的外观。 它使您以虚拟设备无法提供的方式感受到工作的真实性。 因此，如果您有能力使用设备，请不要犹豫。

Up to this point, we’re ok with Android — but what about iOS?

到目前为止，我们对Android没问题，但是iOS呢？

为IOS构建本机应用程序 (Building react-native apps for IOS)

Running React Native for iOS doesn’t look much different from Android. The same React Native app that runs in Android can run on iOS as well, with some exceptions.

在iOS上运行React Native与Android并没有太大区别。 除了某些例外，在Android中运行的同一React Native应用程序也可以在iOS上运行。

For example if you want to run on an iOS device, you need to have a MacOS. Talking about MacOS and iOS, you don’t need to download any extra dependencies such as the SDK for Android to run React Native on iOS.

例如，如果要在iOS设备上运行，则需要安装MacOS。 谈到MacOS和iOS，您无需下载任何其他依赖项，例如Android的SDK即可在iOS上运行React Native。

Regarding Emulators, Xcode has nice emulators that you can use to test your React Native app. You can check this post that shows some tricks to use with Emulators.

关于仿真器，Xcode具有不错的仿真器，您可以使用它们来测试React Native应用程序。 您可以查看这篇文章，其中显示了与模拟器一起使用的一些技巧 。

In MacOS you can run both iOS and Android. You can definitely install Android Studio and Genymotion on MacOS. This possibility doesn’t exist on a PC where you can only run the Android emulator but not an iOS emulator. So you are lucky ?if you have a MacOS — enjoy ?.

在MacOS中，您可以同时运行iOS和Android。 您绝对可以在MacOS上安装Android Studio和Genymotion。 在只能运行Android模拟器但不能运行iOS模拟器的PC上不存在这种可能性。 因此，如果您拥有MacOS，那么您很幸运–享受吗？

So now we have the environment to build a React Native app and we’ve installed everything, but how is the React Native code written? It’s so simple: you will actually write Reactjs code.

因此，现在我们有了构建React Native应用程序的环境，并且已经安装了所有内容，但是React Native代码是如何编写的？ 如此简单：您实际上将编写Reactjs代码。

You can check the official guide to get some practice with React Native. I recommend this great article to start “React Native YouTube Replica.” It will guide you step by step to create your first React Native app.

您可以查看官方指南以使用React Native进行一些练习。 我推荐这篇精彩的文章来开始“ React Native YouTube副本。 ”它将指导您逐步创建您的第一个React Native应用。

Wow! Up until now you are fine and you are coding with react-native. ? But you need to check and debug your errors and see the logs of your code. Yeah the logs!! So we need a debugger! How do you debug with React Native?

哇！ 到目前为止，您还不错，并且您正在使用react-native进行编码。 ？ 但是您需要检查和调试错误，并查看代码日志。 是的，原木！！ 因此，我们需要一个 调试器！ 如何使用React Native进行调试？

调试本机 (Debugging react-native)

Debugging your code is very important, not just with React Native but with any other programming language. So in your React Native code, you need to know what’s going on. There are many different ways to debug a React Native app like:

调试代码非常重要，不仅使用React Native，而且使用任何其他编程语言。 因此，在您的React Native代码中，您需要了解发生了什么。 有很多不同的方法可以调试React Native应用，例如：

使用Chrome devtools进行调试 (Debug with Chrome devtools)

React Native gives you the option to use Chrome devtools to see the logs of your app. To debug with Chrome and enable debugging mode in your emulator, on the keyboard just click Ctrl+ m.

React Native提供了使用Chrome devtools查看应用日志的选项。 要使用Chrome调试并在模拟器中启用调试模式，请在键盘上单击Ctrl+ m 。

This screen will pop-up:

该屏幕将弹出：

And then choose Debug Js Remotely. This will open a tab in Google Chrome with this address http://localhost:8081/debugger-ui/. That’s for using Chrome devtools, what about other options?

然后选择“ Debug Js Remotely 。 这将在Google Chrome中打开一个标签页，其地址为http://localhost:8081/debugger-ui/ 。 那是使用Chrome devtools，其他选项呢？

使用React-native-debugger (Using React-native-debugger)

React-native-debugger is a great tool to debug React Native code. It’s a desktop application that gives you many advantages. It comes with Redux devtools and React-devtools integration. You can debug the style as well. It’s actually the best debugger for React Native and it’s the one that I use. Usually it’s available on MacOS, Windows, and Linux. Check out the installation and integration guide.

React-native-debugger是调试React Native代码的好工具。 这是一个桌面应用程序，可为您带来许多优势。 它带有Redux devtools和React-devtools集成。 您也可以调试样式。 实际上，它是React Native的最佳调试器，也是我使用的调试器。 通常，它可在MacOS，Windows和Linux上使用。 查看安装和集成指南 。

I think it’s enough at this point. This is the first part of the absolute guide for building mobile apps with React Native. In the next part we are going to dive into more technical tips and issues like how we can use native components, the React native API, integration with other libraries, Redux , GraphQL and stuff like that. So subscribe to this mail-list to stay tuned when the next part comes out. Thank you for your time. ?

我认为到此为止就足够了。 这是使用React Native构建移动应用程序的绝对指南的第一部分。 在下一部分中，我们将深入探讨更多技术提示和问题，例如如何使用本机组件，React本机API，与其他库的集成，Redux，GraphQL以及类似的东西。 因此，请订阅此邮件列表，以在下一部分出现时继续关注。 感谢您的时间。 ？

You can always find me on Twitter ?

您总能在Twitter上找到我吗？

翻译自: https://www.freecodecamp.org/news/what-you-need-to-know-to-start-building-mobile-apps-in-react-native-dded951277b7/