Inicio rápido: SDK de React Native

Los SDK de dispositivos Atlas están obsoletos. Consulte Página de desuso para más detalles.

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

Antes de comenzar, instale el SDK de Realm React Native.

Acerca del paquete @realm/react

@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.

Consulte estas páginas para obtener más detalles:

Configura tu aplicación Realm

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
Configurar un reino creando un objeto de contexto de reino, extrayendo ganchos y configurando proveedores

Definir modelos de objetos

Los modelos de objetos de su aplicación definen los tipos de datos que puede almacenar en un dominio. Cada modelo de objeto se convierte en un tipo de objeto de dominio.

Para definir un modelo de objeto Realm:

Crea una clase que extienda Realm.Object.
Añade un campo schema.
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',
  };
}

Para obtener más información, consulte Definir un modelo de objeto de reino.

Configurar un reino

Antes de poder trabajar con datos, debe configurar un dominio. Esto significa que debe configurar el contexto y los proveedores @realm/react desde. Para obtener más información, consulte Configurar un dominio.

Para configurar y acceder a un dominio local:

Importar RealmProvider desde @realm/react.
Pase sus modelos de objetos a la propiedad schema.
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 de Realm

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

Debe anidar los componentes que realizan estas operaciones dentro de RealmProvider. Los ganchos useRealm(), useQuery() y useObject() le permiten realizar operaciones de lectura y escritura en su dominio.

Para obtener descripciones detalladas de RealmProvider y sus ganchos, consulte RealmProvider (@realm/react)

Leer, ordenar y filtrar objetos

@realm/react proporciona ganchos para ayudarle a encontrar una colección de objetos Realm o un solo objeto Realm.

Como parte useQuery() de, puedes filtrar u ordenar los resultados utilizando el lenguaje de consulta Realm (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
};

Para obtener más información, consulte CRUD: lectura y consulta de datos.

Operaciones de lectura fuera de los ganchos

A veces, es posible que necesites usar operaciones de lectura de Realm, pero no en el nivel superior de tu componente React Native. Dado que los ganchos solo funcionan en el nivel superior de los componentes, no puedes usar los ganchos @realm/react en estas situaciones.

En su lugar, puede utilizar Realm.objects para colecciones o Realm.objectForPrimaryKey para un solo objeto.

Crear, actualizar y eliminar objetos de Realm

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().

Para obtener más información, consulte Escribir transacciones.

Crear objetos

Para crear un nuevo objeto Realm, especifique el tipo de objeto, pase los valores iniciales del objeto y agréguelo al reino en un bloque de transacción de escritura.

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>
  );
};

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

Actualizar objetos

Para actualizar un objeto Realm, actualice sus propiedades en un bloque de transacción de escritura.

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.

Eliminar objetos

Para eliminar un objeto Realm, pase el objeto a Realm.delete() dentro de un bloque de transacción de escritura.

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>
  );
};

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

Agregar sincronización de dispositivos Atlas (opcional)

Después de poner en funcionamiento su dominio no sincronizado, puede agregar la sincronización de dispositivos Atlas. Esto permite que los datos de su dominio se sincronicen con un clúster de MongoDB Atlas y otros dispositivos cliente.

Para utilizar la sincronización de dispositivos, debes configurar un par de cosas más:

Cree un backend en Atlas App Services (consulte los requisitos previos a continuación)
Configurar un reino de sincronización flexible en lugar de un reino sin sincronización

Requisitos previos

Una aplicación de App Services
Autenticación anónima habilitada en la interfaz de usuario de App Services
Sincronización flexible habilitada con el modo de desarrollo activado

Configurar y acceder a un dominio sincronizado

Para utilizar una sincronización de dispositivos, debe configurar tres @realm/react proveedores:

Después de inicializar la aplicación, autenticar un usuario y definir el modelo de objetos, puedes configurar un dominio sincronizado. Esto es similar a configurar un dominio local. Sin embargo, debes agregar algunas propiedades adicionales a RealmProvider.

Añade la sync propiedad RealmProvider a y pásale un objeto FlexibleSyncConfiguration. Este objeto de sincronización debe flexible: true contener. También debes añadir las suscripciones iniciales. Debes tener al menos una suscripción de sincronización para poder leer o escribir datos sincronizados.

Para configurar y acceder a un realm sincronizado:

Inicialice la aplicación AppProvider con. Puede encontrar el ID de la aplicación en la interfaz de usuario de App Services.
Autenticar un usuario con UserProvider
Configurar un reino sincronizado con 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.

Siguiente: Consulta las aplicaciones de plantilla y el 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.

Bienvenido a la Docs de Atlas Device SDK