如何在React Native中使用Expo（附代码示例）

在我所有的React Native教程中，我打算使用Expo作为基线，因为在用React Native开发应用程序时，它使事情变得更加简单。如果你想学习我关于React Native的教程，你应该把这个设置做好。

使用Expo的React Native

Expo是一个强大的React Native环境，可以帮助你从创建到发布你的React Native应用。不需要直接使用XCode（iOS）或Android Studio，Expo允许你在手机、模拟器或浏览器上看到你正在进行的应用程序。可以说，Expo让React Native开发变得更加容易，因为它消除了所有的摩擦。当你在Expo中写代码时，你仍然在写React Native代码，但有Expo CLI和手机上的Expo客户端的支持。我们将在稍后探讨这两点。

对于Expo的安装，你最好的选择可能是遵循官方Expo文档中的安装说明，因为它的依赖性会时常改变。然而，我想在这里保持这些同步，所以你可能也想遵循我的说明。

首先，你必须安装Node.js。这使得npm--Node.js包管理器--和node本身在命令行上可用。之后，在你的机器上全面安装Expo CLI（命令行界面）。

npm install expo-cli --global

你已经准备好创建你的第一个项目了。使用Expo命令在命令行上初始化一个新项目。你要给你的项目起什么名字由你决定。

expo init myReactNativeProject

之后，导航到你的项目并启动它。

cd myReactNativeProjectexpo start

在你的项目开始后，你有多种选择来开发你的React Native应用。最受欢迎的可能是在你的iOS或Android设备上直接启动应用程序，只需在启动后用手机的相机应用程序扫描QR码。你必须先在你的手机上从App Store安装Expo Client。其他选择包括在浏览器或手机模拟器上启动该应用程序。无论你选择哪种方式，在启动应用程序后，确保它已经在你所需的设备上运行。

Expo配置

Expo是一个强大的React Native应用套件，因为它为你隐藏了大量更复杂的工具。不过你可以做几件事来优化你的Expo编码体验。

首先，我喜欢把入口文件--默认是App.js--移到另一个位置。因此，在你的项目根目录下创建一个新的index.js文件，并赋予它以下实施细节。

import { registerRootComponent } from 'expo';
import App from './src/App';
registerRootComponent(App);

为了指示Expo使用这个文件，而不是项目根目录下默认的App.js文件，打开package.json文件，改变main属性。

{
  "main": "index.js",
  "scripts": {
    ...
  },
  "dependencies": {
    ...
  },
  ...
}

最后但并非最不重要的是，创建一个新的src/文件夹，里面有一个src/App.js文件。将你的代码从旧的App.js文件移到新的src/App.js文件，并删除旧的App.js文件。现在，一切都应该像以前一样工作，但你有一个专门的源代码文件夹，为你的React Native应用提供了好处。

如果你有任何其他的世博配置想与他人分享，请在下面写下评论。毕竟，我希望你已经准备好通过使用Expo开始对你的React Native应用进行编码。