React Native 入門 - 適用於 JavaScript 的 AWS SDK

link管理

链接快照平台

输入网页链接，自动生成快照
标签化管理网页链接

注意

此範例的 IAM 角色應設定為使用 AmazonS3FullAccess 許可。

步驟 1：建立 Amazon Cognito 身分集區

在本練習中，您將建立和使用 Amazon Cognito Identity 集區，為 Amazon S3 服務提供未經驗證的應用程式存取權。建立身分集區也會建立兩個 AWS Identity and Access Management (IAM) 角色，一個用於支援身分提供者驗證的使用者，另一個用於支援未經驗證的訪客使用者。

在本範例中，我們只會使用未經驗證的使用者角色，以專注進行任務重點。您之後可以整合對身分提供者和已驗證使用者的支援。

建立 Amazon Cognito 身分集區

登入 AWS Management Console ，並在 Amazon Web Services 主控台開啟 Amazon Cognito 主控台。
在主控台開啟頁面上選擇 身分集區 。
在下一頁中，選擇 Create new identity pool (建立新的身分集區) 。

注意

如果沒有其他身分集區，Amazon Cognito 主控台會略過此頁面，並改為開啟下一頁。
在 設定身分集區信任 中，選擇 訪客存取 以進行使用者身分驗證。
在 設定許可 中，選擇 建立新的 IAM 角色 ，然後在 IAM 角色 名稱中輸入名稱（例如 getStartedReactRole )。
在 設定屬性 中，在 身分集 區名稱中輸入名稱（例如 getStartedReactPool )。
在 檢閱和建立 中，確認您為新身分池所做的選擇。選取編輯以返回精靈並變更任何設定。當您完成時，請選取 建立身分池 。
請記下此新建立之身分集區的身分集區 ID 和區域。您需要這些值來取代瀏覽器指令碼中的 region 和 identityPoolId 。

建立 Amazon Cognito 身分集區後，您就可以新增 React Native 應用程式所需的 Amazon S3 許可。

步驟 2：將政策新增至建立的 IAM 角色

若要啟用瀏覽器指令碼存取 Amazon S3 以建立和刪除 Amazon S3 儲存貯體，請使用為 Amazon Cognito 身分集區建立的未驗證 IAM 角色。這需要您將 IAM 政策新增至角色。如需 IAM 角色的詳細資訊，請參閱《 IAM 使用者指南 》中的建立角色以將許可委派給 AWS 服務。

將 Amazon S3 政策新增至與未驗證使用者相關聯的 IAM 角色

登入 AWS Management Console ，並在 https：// https://console.aws.amazon.com/iam/ 開啟 IAM 主控台。
在左側導覽窗格中，選擇 Roles (角色)。
選擇您要修改的角色名稱（例如 getStartedRole )，然後選擇許可索引標籤。
選擇 新增許可 ，然後選擇 連接政策 。
在 新增此角色的許可 頁面中，尋找並選取 AmazonS3ReadOnlyAccess 的核取方塊。

注意

您可以使用此程序來啟用對任何 AWS 服務的存取。
選擇 新增許可 。

建立 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 套件管理員）網站上的在本機下載和安裝套件和建立 Node.js 模組。 https://docs.npmjs.com/creating-node-js-modules https://www.npmjs.com/ 如需下載和安裝的資訊適用於 JavaScript 的 AWS SDK，請參閱安裝適用於 JavaScript 的軟體開發套件。

安裝身分驗證所需的其他相依性。


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

步驟 5：撰寫 React Native 程式碼

將下列程式碼新增至 App.tsx 。將 identityPoolId 和 區域 取代為身分集區 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 && (
          style={
            msg.type === MessageType.SUCCESS
              ? styles.successText
              : styles.failureText
          {msg.message}
        </Text>
        <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 和 AWS SDK 相依性。
        在函數應用程式中：
        系統會建立 S3Client 物件，並使用先前建立的 Amazon Cognito 身分集區指定登入資料。
方法 createBucket和 會分別deleteBucket建立和刪除指定的儲存貯體。
React Native View 會顯示文字輸入欄位，讓使用者指定 Amazon S3 儲存貯體名稱，以及用來建立和刪除指定 Amazon S3 儲存貯體的按鈕。
        您可以在  GitHub 上取得完整的 JavaScript 頁面。
        步驟 6：執行範例
        注意
請記得登入！如果您使用 IAM Identity Center 進行身分驗證，請記得使用 AWS CLI aws sso login命令登入。
        若要執行範例，請使用 npm web執行 ios、 或 android命令。
        以下是在 macOS 上執行ios命令的範例輸出。
        
$ npm run ios
> [email protected] 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
> [email protected] 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...
info Starting the app on "emulator-5554"...
Starting: Intent { cmp=com.reactnativeapp/.MainActivity } 
        輸入您要建立或刪除的儲存貯體名稱，然後按一下建立儲存貯體或刪除儲存貯體。相應的命令將傳送到 Amazon S3，並顯示成功或錯誤訊息。