Join us at MongoDB.local London on 7 May to unlock new possibilities for your data. Use WEB50 to save 50%.
Register now >
Docs Menu
Docs Home
/
MongoDB Atlas
/
SDK de Dispositivo Atlas
Docs Home
/
MongoDB Atlas
/
SDK de Dispositivo Atlas
Docs Home
/
MongoDB Atlas
/
SDK de Dispositivo Atlas

Inicio rápido: SDK de React Native

Esta página demuestra cómo utilizar Realm utilizando el SDK de React Native.

Antes de comenzar, instala el SDK Realm React Native.

About the @realm/react Package

@realm/reaccionar Es un paquete utilizado en el SDK de React Native. Proporciona ganchos de React con reconocimiento de estado para datos de Realm. Estos ganchos supervisan los datos de Realm y rerenderizan los componentes según sea necesario.

La documentación del SDK de React Native utiliza el @realm/react Paquete npm para ejemplos y descripción de conceptos.

Refer to these pages for more details:

Set Up Your Realm App

Después de instalar los paquetes realm y @realm/react, hay algunas cosas más que configurar antes de poder acceder a su reino y trabajar con datos locales:

  • Define tus modelos de objetos

  • Configure a realm by creating a realm context object, extracting hooks, and setting up providers

Definir modelos de objetos

Your application's object models define the data types that you can store within a realm. Each object model becomes a Realm object type.

To define a Realm object model:

  1. Crea una clase que extienda Realm.Object.

  2. Agregar un campo schema.

  3. Para el valor schema, cree un objeto que contenga las propiedades properties y name. El valor del nombre debe ser único entre los tipos de objeto de su dominio.

// Define your object model
export class Profile extends Realm.Object<Profile> {
  _id!: BSON.ObjectId;
  name!: string;
  static schema: ObjectSchema = {
    name: 'Profile',
    properties: {
      _id: 'objectId',
      name: {type: 'string', indexed: 'full-text'},
    },
    primaryKey: '_id',
  };
}

To learn more, refer to Define a Realm Object Model.

Configure a Realm

Before you can work with data, you need to configure a realm. This means you need to set up context and providers from @realm/react. To learn more, refer to Configure a Realm.

To configure and access a local realm:

  1. Import RealmProvider from @realm/react.

  2. Pase sus modelos de objetos a la propiedad schema.

  3. Agregue otras propiedades de Objeto de configuración como props a RealmProvider.

import React from 'react';
import {RealmProvider} from '@realm/react';
// Import your models
import {Profile} from '../../../models';
export const AppWrapper = () => {
  return (
    <RealmProvider schema={[Profile]}>
      <RestOfApp />
    </RealmProvider>
  );
};

Trabajar con objetos Realm

Una vez que tenga un modelo de datos y un reino configurado, puede crear, leer, actualizar o eliminar objetos del reino.

You must nest components that perform these operations inside of RealmProvider. The useRealm(), useQuery(), and useObject() hooks enable you to perform read and write operations in your realm.

For detailed descriptions of RealmProvider and its hooks, refer to RealmProvider (@realm/react)

Leer, ordenar y filtrar objetos

@realm/react provides hooks to help you find a collection of Realm objects or a single Realm object.

As part of useQuery(), you can filter or sort the results using Realm Query Language (RQL).

import React from 'react';
import {useQuery} from '@realm/react';
import {Profile} from '../../models';
export const Read = () => {
  // Find
  const profiles = useQuery(Profile);
  // Sort
  const sortedProfiles = useQuery(Profile, profiles => {
    return profiles.sorted('name', false);
  });
  // Filter
  const filteredProfiles = useQuery(Profile, profiles => {
    return profiles.filtered('name == "testProfile"');
  });
  // ... rest of component
};

To learn more, refer to CRUD - Read and Query Data.

Read Operations Outside of hooks

Sometimes, you may need to use Realm read operations, but not at the top level of your React Native component. Because hooks only work at the top level of components, you can't use the @realm/react hooks in these situations.

En su lugar, puedes utilizar Realm.objects para colecciones o Realm.objectForPrimaryKey para un objeto individual.

Create, Update, and Delete Realm Objects

Después de acceder al dominio con,useRealm() puede crear, actualizar y eliminar objetos dentro del dominio. Todas las operaciones deben estar en un bloque de transacción Realm.write().

To learn more, refer to Write Transactions.

Create Objects

To create a new Realm object, specify the object type, pass in the object's initial values, and add it to the realm in a write transaction block.

import React, {useState} from 'react';
import {Text, TextInput, View} from 'react-native';
import {BSON} from 'realm';
import {useRealm} from '@realm/react';
import {Profile} from '../../models';
export const Create = () => {
  const realm = useRealm();
  const [profileName, setProfileName] = useState('');
  const addProfile = () => {
    realm.write(() => {
      realm.create(Profile, {
        _id: new BSON.ObjectId(),
        name: profileName,
      });
    });
  };
  return (
    <View>
      <Text>Create</Text>
      <TextInput
        onChangeText={setProfileName}
        value={profileName}
        placeholder="Profile name..."
      />
      <Button
        title="Add Profile"
        onPress={addProfile}
      />
    </View>
  );
};

To learn more, refer to CRUD - Create.

Actualizar objetos

To update a Realm object, update its properties in a write transaction block.

import React, {useState} from 'react';
import {Text, FlatList, View, Pressable, TextInput} from 'react-native';
import {useRealm, useQuery} from '@realm/react';
import {Profile} from '../../models';
export const Update = () => {
  const realm = useRealm();
  const profiles = useQuery(Profile);
  const [profileToUpdate, setProfileToUpdate] = useState('');
  const [newProfileName, setNewProfileName] = useState('');
  const updateProfile = () => {
    const toUpdate = realm
      .objects(Profile)
      .filtered('name == $0', profileToUpdate);
    realm.write(() => {
      toUpdate[0].name = newProfileName;
    });
  };
  return (
    <View>
      <Text>Update</Text>
      {profiles.length ? (
        <View>
          <Text>Profiles: </Text>
          <FlatList
            scrollEnabled={false}
            data={profiles}
            horizontal={true}
            renderItem={({item}) => (
              <Pressable
                onPress={() => {
                  setProfileToUpdate(item.name);
                }}>
                <Text
                 >
                  {item.name}
                </Text>
              </Pressable>
            )}
            keyExtractor={item => item.name}
          />
        </View>
      ) : (
        <Text>🛑 No profiles found</Text>
      )}
      {profileToUpdate && (
        <TextInput
          style={styles.textInput}
          onChangeText={setNewProfileName}
          value={newProfileName}
          placeholder="New profile name..."
        />
      )}
      <Button
        title="Update profile"
        onPress={updateProfile}
      />
    </View>
  );
};

Para obtener más información, consulte CRUD - Actualización.

Borrar objetos

To delete a Realm object, pass the object to Realm.delete() within a write transaction block.

import React, {useState} from 'react';
import {Text, FlatList, View, Pressable} from 'react-native';
import {useRealm, useQuery} from '@realm/react';
import {Profile} from '../../models';
export const Delete = () => {
  const realm = useRealm();
  const profiles = useQuery(Profile);
  const [profileToDelete, setProfileToDelete] = useState('');
  const deleteProfile = () => {
    const toDelete = realm
      .objects(Profile)
      .filtered('name == $0', profileToDelete);
    realm.write(() => {
      realm.delete(toDelete);
    });
  };
  return (
    <View>
      <Text>Delete</Text>
      {profiles.length ? (
        <View>
          <Text>Profiles: </Text>
          <FlatList
            scrollEnabled={false}
            data={profiles}
            horizontal={true}
            renderItem={({item}) => (
              <Pressable
                onPress={() => {
                  setProfileToDelete(item.name);
                }}>
                <Text
                 >
                  {item.name}
                </Text>
              </Pressable>
            )}
            keyExtractor={item => item.name}
          />
        </View>
      ) : (
        <Text>🛑 No profiles found</Text>
      )}
      <Button
        title="Delete profile"
        onPress={deleteProfile}
      />
    </View>
  );
};

To learn more, refer to CRUD - Delete.

Add Atlas Device Sync (Optional)

After getting your non-sync realm running, you can add Atlas Device Sync. This enables your realm data to sync with a MongoDB Atlas cluster and other client devices.

Para usar Device Sync, necesitas configurar un par de cosas más:

  • Cree un backend en Atlas App Services (consulte los requisitos previos a continuación)

  • Configura un realm Flexible Sync en lugar de uno que no sea de sincronización.

Requisitos previos

Configure and Access a Synced Realm

To use a Device Sync, you need to configure three @realm/react providers:

After you initialize your App, authenticate a user, and define your object model, you can configure a synced realm. This is similar to configuring a local realm. However, you need to add some additional props to the RealmProvider.

Add the sync prop to RealmProvider and pass it a FlexibleSyncConfiguration object. This sync object must contain flexible: true You should also add initial subscriptions. You must have at least one sync subscription before you can read or write synced data.

Para configurar y acceder a un realm sincronizado:

  1. Initialize the App using AppProvider. You can find your App ID in the App Services UI.

  2. Authenticate a User with UserProvider

  3. Configure a synced realm with RealmProvider

import React from 'react';
import {Credentials} from 'realm';
import {RealmProvider, AppProvider, UserProvider, useApp} from '@realm/react';
// Import your models
import {Profile} from '../../../models';
// Expose a sync realm
export function AppWrapperSync() {
  return (
    <AppProvider id={APP_ID}>
      <UserProvider fallback={LogIn}>
        <RealmProvider
          schema={[Profile]}
          sync={{
            flexible: true,
            onError: (_session, error) => {
              console.log(error);
            },
            initialSubscriptions: {
              update(subs, realm) {
                subs.add(realm.objects('Profile'));
              },
              rerunOnOpen: true,
            },
          }}
          fallback={fallback}>
          <RestOfApp />
        </RealmProvider>
      </UserProvider>
    </AppProvider>
  );
}

La sintaxis para crear, leer, actualizar y eliminar objetos en un dominio sincronizado es idéntica a la de los dominios no sincronizados. Mientras trabaja con datos locales, un subproceso en segundo plano integra, carga y descarga conjuntos de cambios de forma eficiente.

Para obtener más información, consulta Configurar una Synced Realm.

Next: Check out the Template Apps and Tutorial

Si te interesa una experiencia guiada, puedes leer nuestro tutorial del SDK de Realm para React Native. Este tutorial implementa y amplía una aplicación base de React Native creada con Realm y Device Sync.

También puedes usar la aplicación de plantilla para experimentar con el SDK de React Native por tu cuenta. Para configurarla, consulta la sección "Aplicaciones de plantilla" en la documentación de Atlas App Services.

Next

Bienvenido a la Docs de Atlas Device SDK

En esta página