Amazon Web Services 文档中描述的 Amazon Web Services 服务或功能可能因区域而异。要查看适用于中国区域的差异，请参阅 中国的 Amazon Web Services 服务入门 (PDF)。

适用于 JavaScript 的 Amazon SDKV3 API 参考指南详细描述了 适用于 JavaScript 的 Amazon SDK 版本 3 (V3) 的所有 API 操作。

React Native 入门

本教程将向您展示如何使用 React Native CLI 创建 React Native 应用程序。

本教程将向您展示：

情景

Amazon S3 是一项云服务，让您可以随时在 Web 上的任何位置存储和检索任意数量的数据。React Native 是一个开发框架，可用于创建移动应用程序。本教程展示了如何创建一个 React Native 应用程序，以连接到 Amazon S3 来创建和删除 Amazon S3 存储桶。

该应用程序使用以下适用于 JavaScript 的 SDK API：

完成先决条件任务

本节介绍完成本教程所需的最低设置。您不应将此视为完整设置。为此，请参阅设置适用于 JavaScript 的 SDK。

步骤 1：创建一个 Amazon Cognito 身份池

在本练习中，您将创建并使用一个 Amazon Cognito 身份池，为应用程序提供对 Amazon S3 服务的无需验证身份的访问权限。创建身份池还会创建两个 Amazon Identity and Access Management（IAM）角色，一个用于支持由身份提供商进行了身份验证的用户，另一个用于支持未经身份验证的来宾用户。

在本练习中，我们仅使用未经身份验证的用户角色，将重点放在任务上。您可在以后集成对身份提供商和通过身份验证的用户的支持。

在创建 Amazon Cognito 身份池之后，您已准备好添加 React Native 应用程序所需的 Amazon S3 的权限。

步骤 2：将策略添加到创建的 IAM 角色

要使浏览器脚本能够访问 Amazon S3 以创建和删除 Amazon S3 存储桶，请使用为您的 Amazon Cognito 身份池创建的未经身份验证的 IAM 角色。这需要您将 IAM policy 添加到角色。有关 IAM 角色的更多信息，请参阅 IAM 用户指南中的创建向 Amazon 服务委派权限的角色。

创建 Amazon Cognito 身份池并将 Amazon S3 的权限添加到未验证身份用户的 IAM 角色之后，您已准备好构建应用程序。

步骤 3：使用 create-react-native-app 创建应用程序

通过运行以下命令创建 React Native 应用程序。

npx react-native init ReactNativeApp --npm

步骤 4：安装 Amazon S3 程序包和其他依赖项

在项目目录中，运行以下命令来安装 Amazon S3 程序包。

npm install @aws-sdk/client-s3

此命令在项目中安装 Amazon S3 程序包，并更新 package.json，将 Amazon S3 列为项目依赖项。您可以在 https://www.npmjs.com/npm 网站上搜索“@aws-sdk”找到有关此程序包的信息。

这些程序包及其关联的代码将安装在项目的 node_modules 子目录中。

有关安装 Node.js 程序包的更多信息，请参阅 npm（Node.js 程序包管理器）网站上的 Downloading and installing packages locally 和 Creating Node.js Modules。有关下载和安装适用于 JavaScript 的 Amazon SDK的信息，请参阅安装 SDK for JavaScript。

安装身份验证所需的其他依赖项。

npm install @aws-sdk/client-cognito-identity @aws-sdk/credential-provider-cognito-identity

步骤 5：编写 React Native 代码

将以下代码添加到 App.tsx。将 identityPoolId 和 region 替换为您的身份池 ID 和区域，即您将创建 Amazon S3 存储桶的位置。

import React, { useCallback, useState } from "react";
import { Button, StyleSheet, Text, TextInput, View } from "react-native";
import "react-native-get-random-values";
import "react-native-url-polyfill/auto";

import {
  S3Client,
  CreateBucketCommand,
  DeleteBucketCommand,
} from "@aws-sdk/client-s3";
import { fromCognitoIdentityPool } from "@aws-sdk/credential-providers";

const client = new S3Client({
  // The AWS Region where the Amazon Simple Storage Service (Amazon S3) bucket will be created. Replace this with your Region.
  region: "us-east-1",
  credentials: fromCognitoIdentityPool({
    // Replace the value of 'identityPoolId' with the ID of an Amazon Cognito identity pool in your Amazon Cognito Region.
    identityPoolId: "us-east-1:edbe2c04-7f5d-469b-85e5-98096bd75492",
    // Replace the value of 'region' with your Amazon Cognito Region.
    clientConfig: { region: "us-east-1" },
  }),
});

enum MessageType {
  SUCCESS = 0,
  FAILURE = 1,
  EMPTY = 2,
}

const App = () => {
  const [bucketName, setBucketName] = useState("");
  const [msg, setMsg] = useState<{ message: string; type: MessageType }>({
    message: "",
    type: MessageType.EMPTY,
  });

  const createBucket = useCallback(async () => {
    setMsg({ message: "", type: MessageType.EMPTY });

    try {
      await client.send(new CreateBucketCommand({ Bucket: bucketName }));
      setMsg({
        message: `Bucket "${bucketName}" created.`,
        type: MessageType.SUCCESS,
      });
    } catch (e) {
      console.error(e);
      setMsg({
        message: e instanceof Error ? e.message : "Unknown error",
        type: MessageType.FAILURE,
      });
    }
  }, [bucketName]);

  const deleteBucket = useCallback(async () => {
    setMsg({ message: "", type: MessageType.EMPTY });

    try {
      await client.send(new DeleteBucketCommand({ Bucket: bucketName }));
      setMsg({
        message: `Bucket "${bucketName}" deleted.`,
        type: MessageType.SUCCESS,
      });
    } catch (e) {
      setMsg({
        message: e instanceof Error ? e.message : "Unknown error",
        type: MessageType.FAILURE,
      });
    }
  }, [bucketName]);

  return (
    <View style={styles.container}>
      {msg.type !== MessageType.EMPTY && (
        <Text
          style={
            msg.type === MessageType.SUCCESS
              ? styles.successText
              : styles.failureText
          }
        >
          {msg.message}
        </Text>
      )}
      <View>
        <TextInput
          onChangeText={(text) => setBucketName(text)}
          autoCapitalize={"none"}
          value={bucketName}
          placeholder={"Enter Bucket Name"}
        />
        <Button color="#68a0cf" title="Create Bucket" onPress={createBucket} />
        <Button color="#68a0cf" title="Delete Bucket" onPress={deleteBucket} />
      </View>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: "center",
    justifyContent: "center",
  },
  successText: {
    color: "green",
  },
  failureText: {
    color: "red",
  },
});

export default App;

该代码首先导入所需的 React、React Native 和 Amazon SDK 依赖项。

在函数 APP 中：

完整的 JavaScript 页面可在此处的 GitHub 上找到。

步骤 6：运行示例

要运行示例，请使用 npm 执行 web、ios 或 android 命令。

以下是在 macOS 上运行 ios 命令的示例输出。

$ npm run ios

> ReactNativeApp@0.0.1 ios /Users/trivikr/workspace/ReactNativeApp
> react-native run-ios

info Found Xcode workspace "ReactNativeApp.xcworkspace"
info Launching iPhone 11 (iOS 14.2)
info Building (using "xcodebuild -workspace ReactNativeApp.xcworkspace -configuration Debug -scheme ReactNativeApp -destination id=706C1A97-FA38-407D-AD77-CB4FCA9134E9")
success Successfully built the app
info Installing "/Users/trivikr/Library/Developer/Xcode/DerivedData/ReactNativeApp-cfhmsyhptwflqqejyspdqgjestra/Build/Products/Debug-iphonesimulator/ReactNativeApp.app"
info Launching "org.reactjs.native.example.ReactNativeApp"

success Successfully launched the app on the simulator  

以下是在 macOS 上运行 android 命令的示例输出。

$ npm run android

> ReactNativeApp@0.0.1 android
> react-native run-android

info Running jetifier to migrate libraries to AndroidX. You can disable it using "--no-jetifier" flag.
Jetifier found 970 file(s) to forward-jetify. Using 12 workers...
info Starting JS server...
info Launching emulator...
info Successfully launched emulator.
info Installing the app...

> Task :app:stripDebugDebugSymbols UP-TO-DATE
Compatible side by side NDK version was not found.

> Task :app:installDebug
02:18:38 V/ddms: execute: running am get-config
02:18:38 V/ddms: execute 'am get-config' on 'emulator-5554' : EOF hit. Read: -1
02:18:38 V/ddms: execute: returning
Installing APK 'app-debug.apk' on 'Pixel_3a_API_30_x86(AVD) - 11' for app:debug
02:18:38 D/app-debug.apk: Uploading app-debug.apk onto device 'emulator-5554'
02:18:38 D/Device: Uploading file onto device 'emulator-5554'
02:18:38 D/ddms: Reading file permission of /Users/trivikr/workspace/ReactNativeApp/android/app/build/outputs/apk/debug/app-debug.apk as: rw-r--r--
02:18:40 V/ddms: execute: running pm install -r -t "/data/local/tmp/app-debug.apk"
02:18:41 V/ddms: execute 'pm install -r -t "/data/local/tmp/app-debug.apk"' on 'emulator-5554' : EOF hit. Read: -1
02:18:41 V/ddms: execute: returning
02:18:41 V/ddms: execute: running rm "/data/local/tmp/app-debug.apk"
02:18:41 V/ddms: execute 'rm "/data/local/tmp/app-debug.apk"' on 'emulator-5554' : EOF hit. Read: -1
02:18:41 V/ddms: execute: returning
Installed on 1 device.

Deprecated Gradle features were used in this build, making it incompatible with Gradle 7.0.
Use '--warning-mode all' to show the individual deprecation warnings.
See https://docs.gradle.org/6.2/userguide/command_line_interface.html#sec:command_line_warnings

BUILD SUCCESSFUL in 6s
27 actionable tasks: 2 executed, 25 up-to-date
info Connecting to the development server...
8081
info Starting the app on "emulator-5554"...
Starting: Intent { cmp=com.reactnativeapp/.MainActivity } 

输入您要创建或删除的存储桶名称，然后点击创建存储桶或删除存储桶。相应命令将发送至 Amazon S3，并显示成功或错误信息。

可能的增强功能

此处为该应用程序的变体，可用于进一步探索如何在 React Native 应用程序中使用适用于 JavaScript 的 SDK。