La guía de API referencia de la versión AWS SDK for JavaScript 3 describe en detalle todas las API operaciones de la AWS SDK for JavaScript versión 3 (V3).

Las traducciones son generadas a través de traducción automática. En caso de conflicto entre la traducción y la version original de inglés, prevalecerá la version en inglés.

Cómo empezar a usar React Native

Este tutorial te muestra cómo puedes crear una aplicación React Native con React Native. CLI

Este tutorial te muestra lo siguiente:

El escenario

Amazon S3 es un servicio en la nube que le permite almacenar y recuperar cualquier cantidad de datos en cualquier momento y desde cualquier lugar de la web. React Native es un marco de desarrollo que le permite crear aplicaciones móviles. En este tutorial, se muestra cómo crear una aplicación React Native que se conecte a Amazon S3 para crear y eliminar un bucket de Amazon S3.

La aplicación utiliza lo siguiente SDK para JavaScript APIs:

Tareas previas necesarias

Esta sección proporciona la configuración mínima necesaria para completar este tutorial. No debería tomarse esto como una configuración completa. Para una configuración completa, vaya a Configure el SDK formulario JavaScript.

Paso 1: Creación de un grupo de identidades en Amazon Cognito

En este ejercicio, creará y utilizará un grupo de identidades de Amazon Cognito para proporcionar acceso no autenticado a su aplicación para el servicio Amazon S3. Al crear un grupo de identidades, también se crean dos AWS Identity and Access Management (IAM) funciones: una para dar soporte a los usuarios autenticados por un proveedor de identidad y otra para dar soporte a los usuarios invitados no autenticados.

En este ejercicio, vamos a trabajar con el rol de usuario sin autenticar para concentrarnos en la tarea. Puede integrar la compatibilidad con un proveedor de identidades y los usuarios autenticados más adelante.

Tras crear su grupo de identidades de Amazon Cognito, estará listo para añadir los permisos para Amazon S3 que necesite su aplicación React Native.

Paso 2: Añadir una política al rol de IAM creado

Para permitir el acceso a Amazon S3 mediante scripts de navegador para crear y eliminar un bucket de Amazon S3, utilice el IAM rol no autenticado creado para su grupo de identidades de Amazon Cognito. Para ello tiene que añadir una política de IAM al rol. Para obtener más información sobre IAM los roles, consulte Crear un rol para delegar permisos a un AWS servicio en la Guía del IAM usuario.

Tras crear su grupo de identidades de Amazon Cognito y añadir permisos para Amazon S3 a su IAM rol de usuarios no autenticados, estará listo para crear la aplicación.

Paso 3: Cree la aplicación mediante create-react-native-app

Crea una aplicación React Native ejecutando el siguiente comando.

npx react-native init ReactNativeApp --npm

Paso 4: Instalar el paquete Amazon S3 y otras dependencias

Dentro del directorio del proyecto, ejecute los siguientes comandos para instalar el paquete Amazon S3.

npm install @aws-sdk/client-s3

Este comando instala el paquete Amazon S3 en su proyecto y lo actualiza package.json para incluir Amazon S3 como una dependencia del proyecto. Para obtener información sobre este paquete, busque "@aws -sdk» en el sitio web de https://www.npmjs.com/ npm.

Estos paquetes y su código asociado se instalan en el subdirectorio node_modules del proyecto.

Para obtener más información sobre la instalación de paquetes de Node.js, consulte Descarga e instalación de paquetes localmente y Creación de módulos Node.js en el sitio web npm (administrador de paquetes Node.js). Para obtener información sobre cómo descargar e instalar el AWS SDK for JavaScript, consulteInstale el SDK para JavaScript.

Instale las demás dependencias necesarias para la autenticación.

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

Paso 5: Escribe el código de React Native

Agregue el siguiente código aApp.tsx. Sustituya identityPoolId y region por el ID del grupo de identidades y la región en la que se creará el bucket de 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;

Para importar primero el código se requieren React, React Native y AWS SDK las dependencias.

Dentro de la aplicación de funciones:

La JavaScript página completa está disponible aquí en GitHub.

Paso 6: ejecuta el ejemplo

Para ejecutar el ejemplo webios, ejecute o ejecute el android comando mediante npm.

Este es un ejemplo de resultado de la ejecución de un ios comando en macOS.

$ 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  

Este es un ejemplo de resultado de la ejecución de un android comando en macOS.

$ 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 } 

Introduce el nombre del depósito que deseas crear o eliminar y haz clic en Crear depósito o Eliminar depósito. El comando correspondiente se enviará a Amazon S3 y aparecerá un mensaje de éxito o error.

Mejoras posibles

Estas son algunas variantes de esta aplicación que puede utilizar para explorar más a fondo el uso del SDK formulario JavaScript en una aplicación React Native.