开始使用React Native和Expo SDKExpo是一个开源平台，它使开发跨平台的iOS和Android移动应用

Expo是一个开源平台，它使开发跨平台的iOS和Android移动应用程序比以前容易得多。Expo SDK是一系列针对每个iOS和Android平台的原生库，它允许JavaScript访问设备的系统功能，如摄像头、推送通知、本地存储、联系人以及其他硬件和操作系统API。

先决条件

要安装Expo，你的机器需要Node.js的12版或更新版本，因为Expo的命令行工具和依赖性管理依赖于Node平台。你可以通过在终端运行Node -v命令来检查你的Node版本。

Expo提供了一个名为Expo CLI的命令行界面。它被用来在iOS或Android中开发应用时进行测试。

npm install -g expo-cli

为iOS和Android安装Expo移动客户端

为了测试你的移动应用的功能，你需要为安卓和苹果手机安装Expo客户端应用。你可以在Google Play商店和App Store中找到它们。

构建一个世博应用程序

让我们建立一个世博会的应用程序，看看它是如何工作的。你可以用以下命令创建一个新的世博应用。

expo init your_app_name

用你希望建立的应用程序的名称替换your_app_name 。一旦你点击回车，你会被提示为你的应用程序选择模板类型。

你可以选择任何适用于你的应用程序的模板。现在，我将选择 "空白工作流"以使事情变得简单。

接下来，你会被提示通过Yarn安装模板。如果你已经安装了Yarn，请选择是，否则请选择继续。一旦你遵循接下来的步骤，你的应用程序就可以使用了。

跳到下面的命令来启动项目。

cd <app_name>
npm start or yarn start

成功执行上述命令后，它将启动一个新的开发地铁环境。你将得到二维码，应该通过安卓的Expo的客户端应用和iPhone的默认相机应用进行扫描。现在，你就可以开始了。

在Expo和React Native中设置项目

我们的项目由几个重要的文件组成：App.json 有所有的应用配置，如应用名称、SDK版本、图标等。应用程序的依赖性在package.json 文件中列出。然后是App.js ，它在应用程序被启动时运行。在那里，你会看到render 方法，它在返回语句中把所有的组件包在一个单一的组件里面。

你可以使用App.js 文件底部的styles 对象来指定你的UI组件的样式。将styles 从render 方法中移出，将增强React Native中代码的可读性。

下面是App.js 中的示例代码。

import React from 'react';
import { StyleSheet, View, Text } from 'react-native';


export default class Main extends React.Component {

//render method returning RN components   
  render() {
    return (
      <View style={styles.title}>
        <Text style={styles.title_txt}>My First App</Text>
      </View>
    );
  }


}
//code your styles here
const styles = StyleSheet.create({
  title: {
    //Your styles here
  },
  title_txt: {
    //Your styles here
  }
});

什么是Expo SDK？

Expo带有几个内置的库，这些库在大多数应用程序中经常出现。关于这方面的更多细节，请参考Expo文档。然而，以下库在你构建的大多数应用程序中都会有用。

[AppAuth](https://docs.expo.io/versions/v34.0.0/sdk/app-auth/), [AuthSession](https://docs.expo.io/versions/v34.0.0/sdk/auth-session/)：通过OAuth对用户进行认证
[SplashScreen](https://docs.expo.io/versions/v34.0.0/sdk/splash-screen/)：在启动应用程序时制作一个闪屏
[localization](https://docs.expo.io/versions/v34.0.0/sdk/localization/)管理你的应用程序的l10n/i18n，以达到本地化的目的
[AppLoading](https://docs.expo.io/versions/v34.0.0/sdk/app-loading/)：加载资产、字体等。
[MapView](https://docs.expo.io/versions/v34.0.0/sdk/map-view/)：在应用程序中使用地图
[ImagePicker](https://docs.expo.io/versions/v34.0.0/sdk/imagepicker/)/[ImageManipulator](https://docs.expo.io/versions/v34.0.0/sdk/imagemanipulator/)：从设备上打开图像或视频
[Sharing](https://docs.expo.io/versions/v34.0.0/sdk/sharing/)：在应用程序和设备之间共享数据
[SecureStore](https://docs.expo.io/versions/v34.0.0/sdk/securestore/): 在设备存储器上保存数据
[Camera](https://docs.expo.io/versions/v34.0.0/sdk/camera/): 使用设备的摄像头拍摄照片和视频

以下是Expo支持的一些额外功能。

通知：来自Expo推送服务的推送通知
[Admob](https://docs.expo.io/versions/v34.0.0/sdk/admob/):谷歌用于AdMob的SDK
[FacebookAds](https://docs.expo.io/versions/v34.0.0/sdk/facebook-ads/):Facebook的SDK
[Branch](https://docs.expo.io/versions/v34.0.0/sdk/branch/): 使用 branch.io 进行整合
[Amplitude](https://docs.expo.io/versions/v34.0.0/sdk/amplitude/):用于移动应用程序的Amplitude分析

此外，你还可以访问。

[Audio](https://docs.expo.io/versions/v34.0.0/sdk/audio/): 播放或记录声音
[AV](https://docs.expo.io/versions/v34.0.0/sdk/av/): 播放音频/视频
[ART](https://docs.expo.io/versions/v34.0.0/sdk/art/): 使用SVG绘制东西
[Brightness](https://docs.expo.io/versions/v34.0.0/sdk/brightness/): 管理亮度
[BackgroundFetch](https://docs.expo.io/versions/v34.0.0/sdk/background-fetch/)运行后台任务
[Payments](https://docs.expo.io/versions/v34.0.0/sdk/payments/)支持通过Stripe使用Apple Pay和Android Pay进行支付整合

一般来说，一旦你通过Yarn、npm或Expo安装了它，有大约80个API可以访问，而不需要关闭metro bundler，这只是另一种加快进度的方式。

使用Expo创建一个闪屏

让我们通过添加一个闪屏来学习Expo的工作方式。首先，创建一个.png格式的图片，这适合于你的应用程序中的闪屏。然后，将该图片放在你的应用程序目录中。在这里，我已经把它添加到了目录的根部。

现在，使用以下命令将expo-splash-screen 库安装到应用程序中。

expo install expo-splash-screen

接下来，创建一个新文件并导入上述库。之后，创建一个函数来显示闪屏，像这样。

import React, { useCallback, useEffect, useState } from 'react';
import { StyleSheet, Text, View } from 'react-native';

//import splash screen library here
import * as SplashScreen from 'expo-splash-screen';
//import your image from the directory
import splashScreenImage from './splashScreenImage.png'

export default function SplashScreen() {
  const [loaded, setLoaded] = useState(false);

  useEffect(() => {
    async function prepare() {
      try {
       // Keep our splash screen awake while the app fetches the resources
        await SplashScreen.preventAutoHideAsync();
        // Pre-load any content here
        // Also you can make any API calls here
        // Delay loading for one second
        await new Promise(resolve => setTimeout(resolve, 1000));
      } catch (e) {
        console.warn(e);
      } finally {
        // Tell the app that our resources are finished loading
        setLoaded(true);
      }
    }

    prepare();
  }, []);

  const onLayoutRootView = useCallback(async () => {
    if (loaded) {
      // Now, let's inform our splash screen to disappear as our resources are loaded now.
      await SplashScreen.hideAsync();
    }
  }, [loaded]);

  if (!loaded) {
    return null;
  }

  return (
    // Make your view in Splash Screen here.
    <View
      style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Image
        source={splashScreenImage}
        style={{ flex: 1, alignItems: 'center', width: 100, height: 100 }}
        borderRadius={10}
        resizeMode="cover" />
    </View>
  );
}

最后，从你的App.js 中导入文件并在那里调用我们的SplashScreen 函数。

import React from 'react';
import { StyleSheet, View, Text } from 'react-native';
//import our component here
import SplashScreen from './SplashScreen.js';

export default class Main extends React.Component {  
  render() {
    return (
    //place our component here.
      <SplashScreen/>
      <View style={styles.title}>
        <Text style={styles.title_txt}>My First App</Text>
      </View>
    );
  }
}

启动你的应用程序，看看世博会的客户端应用程序的结果吧!

Splash Screen of React Native Logo On Mobil Device

发布并将应用程序上传到商店

当需要将应用发布到商店时，你会被提供一些选项来选择。

#Build command
expo build:[ios|android]

这个命令将开始在云端而不是本地安装软件包，不需要高性能的笔记本电脑或PC。如果你是一个Windows用户也可以，因为你从来没有使用过Xcode。只需等待构建完成，你就可以完成了。

在构建排队后，你可以毫不犹豫地从终端退出。如果您需要了解构建的状态，请浏览 "您可以在 "文本下面的URL，以监控构建。

Build Status URL For Expo App Cloud Upload

Expo Dashboard For Terminal Status

在那里，你会发现一个下载按钮，一旦构建完成就可以使用。在此期间，你可以在终端中等待，以获得直接连接下载软件包。

现在，我们如何把它上传到商店？使用Expo最简单的方法是使用以下命令。

expo upload:[ios|android]

很好!你都准备好了!

2021年世博会增加的新功能

2021年世博会增加了多项新功能。以下是一些最受欢迎的功能。

集成的开发者工具

通过CLI，你可以访问开发者菜单，检查组件，并跟踪结果。只需运行Expo start并点击m来访问开发者菜单，shift+m 来访问性能监视器或本地应用程序中的元素检查器。

强制重载

每隔几分钟就摇动一次机器，这可能是很难做到的！但这并不妨碍你的工作。通过在终端UI中按r，你可以重新加载连接的计算机、笔记本电脑、模拟器和浏览器。这种方法与iOS、Android、网络和所有物理设备兼容。

TypeScript的自动设置

因为安装TypeScript可能很麻烦，所以他们让它完全自动。只需生成一个空白的tsconfig.json 文件并执行Expo的启动命令，剩下的就由Expo来处理。你可以在Expo文档的 "TypeScript "中找到更多的细节。

明显改善的错误

没有人喜欢bug。所以他们在SDK 41中对错误进行了改进，使其具有描述性、有用性和实用性。只有最重要的堆栈痕迹被显示出来，并且错误和警告被精确地指出。源代码图也得到了更新，而且生成的代码痕迹也被屏蔽了。

调试你的配置

现在你可以看到app.config.js 或app.json的评估结果，使用最新的Expo配置顺序。使用expo config --type public 命令可以看到世博发布中使用的应用程序清单文件。

改进了苹果商店的互动和通过终端连接的能力

Expo CLI提供的连接可以快速解决问题，而其他工具则显示为401。如果你需要改变支付方式或签署合同，你只需解决几个点击，就可以重新开始开发。

总的来说，Expo现在速度更快，提供智能认证，改进错误管理，并直接从控制台完全洞察动态问题。

Expo的局限性

虽然有很多令人印象深刻的新功能，但你也应该注意到Expo的一些局限性。

Expo应用程序不支持后台代码执行。这意味着你不能在应用关闭时执行监听位置变化的代码。
世博应用程序被限制在世博SDK支持的本地API中。这意味着，如果应用程序需要一个独特的用例，唯一的方法是使用基本的React Native代码或使用ExpoKit库来开发。
Expo将你绑定在他们的工具集上。这意味着你将无法使用任何其他的React Native开发工具，包括命令行工具和UI框架，只需安装它们。然而，好消息是，Expo SDK符合基本的React Native应用程序，所以从Expo弹出你的应用程序不会是一个挑战。
Expo应用程序中的独立二进制文件只有在在线时才能构建。Expo提供的命令行工具允许开发者在Expo服务器上启动其应用程序的构建过程。一旦完成，你将得到一个URL，以访问可下载的.apk或.ipa文件。

尽管有上述限制，Expo还是很有价值的，因为它是一个完全运作的平台，广泛支持著名的Android和iOS API。这意味着它涵盖了应用程序通常所需的大部分功能。因此，没有必要在Expo之外寻找执行本地功能。

总结

React Native是开发原生移动应用程序的最流行的框架。Expo通过其SDK和开发者工具进一步简化了这个过程。如果你是一个React Native开发者，你应该一直关注Expo，了解它的优势和局限性。

在这篇博文中，我们用Expo创建并发布了一个应用，当然你也可以通过添加更多的功能来扩展这个应用。总的来说，Expo SDK是一个伟大的库集合，几乎涵盖了你在移动应用中想要的所有功能。谢谢你的阅读。

The postGetting started with React Native and Expo SDKappeared first onLogRocket Blog.