开始使用 React Native - Amazon SDK for JavaScript
Amazon Web Services 文档中描述的 Amazon Web Services 服务或功能可能因区域而异。要查看适用于中国区域的差异,请参阅中国的 Amazon Web Services 服务入门

帮助我们改进Amazon SDK for JavaScript版本 3 (V3) 文档,方法是使用反馈链接,或者在上创建议题或拉取请求GitHub.

这些区域有:Amazon SDK for JavaScriptV3 API 参考指南详细描述了Amazon SDK for JavaScript版本 3 (V3)。

本文属于机器翻译版本。若本译文内容与英语原文存在差异,则一律以英文原文为准。

开始使用 React Native

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


                JavaScript code example that applies to React Native.

本教程向你展示:

  • 如何安装和包括Amazon SDK for JavaScript项目所用的版本 3 (V3) 模块。

  • 如何编写连接到 Amazon Simple Service (Amazon S3) 的代码以创建和删除 Amazon S3 存储桶。

情景

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

该应用程序使用以下 SDK JavaScript API:

本教程的设置

本节介绍完成本教程所需的最低设置。您不应将此视为完整设置。为此,请参阅设置适用于 JavaScript 的 开发工具包

注意

如果已通过其他教程或现有配置完成以下任意步骤,请跳过这些步骤。

创建Amazon账户,请参阅如何创建和激活新的 Amazon Web Services 账户?

要执行这些教程,您需要创建Amazon Identity and Access Management(IAM) 用户并获取该用户的凭证。获得这些凭证之后,您可以在开发环境中向开发工具包提供这些凭证。方法如下。

创建和使用凭证

  1. 登录 Amazon Web Services Management Console,然后通过以下网址打开 IAM 控制台:https://console.aws.amazon.com/iam/

  2. 选择 Users,然后选择 Add user

  3. 提供用户名称。在本教程中,我们将使用反应-原生-教程-用户.

  4. 在下SelectAmazon访问类型选择,选择以编程方式访问,然后选择后续:Permissions (下一步:权限)

  5. 选择 Attach existing policies directly(直接附上现有策略)。

  6. In搜索输入,s3,然后选择AmazonS3FullAccess.

  7. 选择 Next:。标签后续:审核, 和创建用户.

  8. 记录的凭据反应-原生-教程-用户. 要完成此操作,您可以下载 .csv 文件,或者复制并粘贴 Access key ID (访问密钥 ID)Secret access key (秘密访问密钥)

    警告

    使用适当的安全措施来确保这些凭证的安全和轮换。

  9. 创建或打开共享 Amazon 凭证文件。这个文件是~/.aws/credentials在 Linux 和 macOS 系统上,%USERPROFILE%\.aws\credentials在 Windows 上。

  10. 将以下文本添加到共享 Amazon 凭证文件中,但将示例 ID 和示例密钥替换为之前获取的内容。请记住保存文件。

    [javascript-tutorials] aws_access_key_id = AKIAIOSFODNN7EXAMPLE aws_secret_access_key = wJalrXUtnFEMI/K7MDENG/bPxRfiCYEXAMPLEKEY

上述过程是用于身份验证和授权的几种可能方法中最简单的过程。有关完整信息,请参阅设置凭证.

要完成本教程,您需要设置React Native 开发环境.

您还需要安装以下工具:

第 1 步:创建一个 Amazon Cognito 身份池

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

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

创建 Amazon Cognito 身份池

  1. 登录到Amazon Web Services Management Console在打开 Amazon Cognito 控制台Amazon Web Services 控制台。

  2. 在控制台打开页面上,选择 Manage Identity Pools (管理身份池)

  3. 在下一页上,选择创建新的身份池

    注意

    如果没有其他身份池,Amazon Cognito 控制台会跳过此页面并打开下一页。

  4. 入门向导身份池名称中,键入您的身份池的名称。

  5. 选择启用未经验证的身份的访问权限

  6. 选择 Create Pool

  7. 在下一页上,选择详细信息以查看为您身份池创建的两个 IAM 角色的名称。记录未经身份验证的身份的角色名称。您需要此名称以便为 Amazon S3 添加所需的策略。

  8. 选择 Allow

  9. 示例代码页面上,选择 JavaScript 平台。然后,复制或记录身份池 ID 和区域。您需要以下值来替换这些值。领域IDENTITY_POOL_ID在浏览器脚本中。

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

第 2 步:将策略添加到创建的 IAM 角色

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

将 Amazon S3 策略添加到与未经身份验证的用户关联的 IAM 角色

  1. 登录 Amazon Web Services Management Console,然后通过以下网址打开 IAM 控制台:https://console.aws.amazon.com/iam/

  2. 在页面左侧的导航面板中,选择角色

  3. 在 IAM 角色列表中,单击之前由 Amazon Cognito 创建的未经身份验证的身份角色的链接。

  4. 在此角色的摘要页面上,选择附加策略

  5. 附加权限在此角色的页面上,查找并选中的复选框AmazonS3FullAccess.

    注意

    您可以使用此流程来启用对任何Amazon服务。

  6. 选择 Attach policy(附上策略)。

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

第 3 步:使用创建-反应-原生应用程序创建应用

通过运行以下命令创建 React Native App。

npx react-native init ReactNativeApp --npm

第 4 步:安装 Amazon S3 软件包和其他依赖项

在项目目录中,运行以下命令以安装 Amazon S3 软件包。

npm install @aws-sdk/client-s3

此命令在项目中安装 Amazon S3 程序包并更新。package.json将 Amazon S3 列为项目依赖项目。您可以通过在 @awshttps://www.npmjs.com/npm 网站。

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

有关安装 Node.js 程序包的更多信息,请参阅在本地下载和安装软件包创建 Node.js 模块npm(Node.js 软件包管理器)网站. 有关下载和安装Amazon SDK for JavaScript的信息,请参阅为 JavaScript 安装开发工具包

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

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

第 5 步:编写 React Native 代码

将以下代码添加到App.js.

import React, { useState } from "javascriptv3/example_code/reactnative/App"; import { Button, StyleSheet, Text, TextInput, View } from "react-native"; import { S3Client, CreateBucketCommand, DeleteBucketCommand, } from "@aws-sdk/client-s3"; import { CognitoIdentityClient } from "@aws-sdk/client-cognito-identity"; import { fromCognitoIdentityPool } from "@aws-sdk/credential-provider-cognito-identity"; const App = () => { const [bucketName, setBucketName] = useState(""); const [successMsg, setSuccessMsg] = useState(""); const [errorMsg, setErrorMsg] = useState(""); // Replace REGION with the appropriate AWS Region, such as 'us-east-1'. const region = "REGION"; const client = new S3Client({ region, credentials: fromCognitoIdentityPool({ client: new CognitoIdentityClient({ region }), // Replace IDENTITY_POOL_ID with an appropriate Amazon Cognito Identity Pool ID for, such as 'us-east-1:xxxxxx-xxx-4103-9936-b52exxxxfd6'. identityPoolId: "IDENTITY_POOL_ID", }), }); const createBucket = async () => { setSuccessMsg(""); setErrorMsg(""); try { await client.send(new CreateBucketCommand({ Bucket: bucketName })); setSuccessMsg(`Bucket "${bucketName}" created.`); } catch (e) { setErrorMsg(e); } }; const deleteBucket = async () => { setSuccessMsg(""); setErrorMsg(""); try { await client.send(new DeleteBucketCommand({ Bucket: bucketName })); setSuccessMsg(`Bucket "${bucketName}" deleted.`); } catch (e) { setErrorMsg(e); } }; return ( <View style={styles.container}> <Text style={{ color: "green" }}> {successMsg ? `Success: ${successMsg}` : ``} </Text> <Text style={{ color: "red" }}> {errorMsg ? `Error: ${errorMsg}` : ``} </Text> <View> <TextInput style={styles.textInput} onChangeText={(text) => setBucketName(text)} autoCapitalize={"none"} value={bucketName} placeholder={"Enter Bucket Name"} /> <Button backroundColor="#68a0cf" title="Create Bucket" onPress={createBucket} /> <Button backroundColor="#68a0cf" title="Delete Bucket" onPress={deleteBucket} /> </View> </View> ); }; const styles = StyleSheet.create({ container: { flex: 1, alignItems: "center", justifyContent: "center", }, }); export default App;

代码首先导入需要 React、React Native 和AmazonSDK 依赖项。

在功能应用程序中:

  • 将创建 S3Client 对象,使用之前创建的 Amazon Cognito 身份池指定凭证。

  • 这些方法createBucketdeleteBucket分别创建和删除指定的存储桶。

  • React Native View 显示一个文本输入字段,供用户指定 Amazon S3 存储桶名称,以及用于创建和删除指定 Amazon S3 存储桶的按钮。

完整 JavaScript 页面可用GitHub 上的这里.

第 6 步:运行示例

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

下面是运行的示例输出iosmacOS 上的命令。

$ 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

下面是运行的示例输出androidmacOS 上的命令。

$ 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 permision 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,并显示成功或错误消息。

可能的增强功能

此处为此应用程序的变体,您可用于进一步探索使用开发工具包 JavaScript 在 React Native 应用程序中。

  • 添加一个按钮以列出 Amazon S3 存储桶,并在列出的每个存储桶旁边提供删除按钮。

  • 添加按钮以将文本对象放入存储桶中。

  • 集成 Facebook 或 Amazon 等外部身份提供商以使用经过身份验证的 IAM 角色。