Crear una aplicación React Native
Objetivos de aprendizaje
Después de completar esta unidad, podrá:
- Crear una aplicación React Native sencilla con Mobile SDK.
- Acceder a componentes React Native proporcionados por Mobile SDK.
- Agregar la información de su aplicación conectada a su aplicación.
- Compilar y probar su aplicación React Native con Mobile SDK.
Crear una aplicación React Native con Forcereact
En el siguiente ejemplo, se crea una aplicación React Native mediante forcereact en macOS X. Puede usar forcereact en macOS o Windows, pero solo puede desarrollar una aplicación React Native para iOS en macOS.
- Para crear una aplicación React Native, ejecute forcereact create en una ventana de terminal.
- Ingrese los siguientes valores en los mensajes que se muestran:
-
Plataforma: lista delimitada por comas de una o varias plataformas. Puede ser ios, android o ios,android.
-
Tipo de aplicación: Pulse <Volver>
-
Nombre de aplicación: FirstReact
-
Nombre de paquete: com.mytrail.react
-
Nombre de organización: MyTrail, Inc.
-
Directorio de resultados: FirstReact
- Así es como se debería mostrar su entrada (sin tener en cuenta cualquier resaltado de la sintaxis irrelevante):
$ forcereact create Enter the target platform(s) separated by commas (ios, android): ios,android Enter your application type (react_native_typescript or react_native, leave empty for react_native_typescript): <Return> Enter your application name: FirstReact Enter your package name: com.mytrail.react Enter your organization name (Acme, Inc.): MyTrail, Inc. Enter output directory for your app (leave empty for the current directory): FirstReact
Nombre de aplicación, nombre de paquete, nombre de organización y el directorio de salida son propiedades personalizadas que usted proporciona.
¿Qué crea esta llamada de forcereact? Una aplicación React Native que:
- Se llama FirstReact.
- Es compatible con iOS y Android.
- Admite el uso de TypeScript
- Se compila con bibliotecas de Mobile SDK.
- Reside en el directorio <current_directory>/FirstReact/.
La primera vez que crea una aplicación forcereact en cualquier equipo de desarrollo, el tiempo de espera será de varios minutos mientras se descargan las bibliotecas de React Native.
Establecer valores de aplicación conectada
Cuando un mensaje de la línea de comandos le informe que el proyecto está listo, actualice el nuevo proyecto para reflejar la configuración de la aplicación conectada.
iOS
- En Xcode, abra el archivo <directorio_actual>/FirstReact/ios/FirstReact.xcworkspace.
- En la vista Project, navegue a FirstReact/FirstReact/Supporting Files, y luego abra el archivo cootconfig.plist.
- Sustituya los valores de "remoteAccessConsumerKey" y "oAuthRedirectURI" por sus propios parámetros.
Android
- En la pantalla Android Studio Welcome, haga clic en Import Project (Eclipse ADT, Gradle, etc.) (Importar proyecto [Eclipse ADT, Gradle, etc.]). O bien, si ya hay otro proyecto abierto en Android Studio, seleccione File | Open (Archivo | Abrir).
- Seleccione el directorio <directorio_actual>/FirstReact/android y luego haga clic en OK.
- En la vista Project, abra el archivo app/src/main/res/values/bootconfig.xml.
- Sustituya los valores de "remoteAccessConsumerKey" y "oauthRedirectURI" por sus propios parámetros.
<?xml version="1.0" encoding="utf-8"?>
<resources>
<string name="remoteAccessConsumerKey">3MVG9Iu66FKeHhINkB1l7xt7kR8czFcCTUhgoA8Ol2Ltf1eYHOU4SqQRSEitYFDUpqRWcoQ2.dBv_a1Dyu5xa</string>
<string name="oauthRedirectURI">testsfdc:///mobilesdk/detect/oauth/done</string>
<string-array name="oauthScopes">
<item>api</item>
</string-array>
<string name="androidPushNotificationClientId"></string>
</resources>
Compilar y probar su aplicación React Native
Para ejecutar su aplicación React Native, vuelva a la aplicación Terminal o a la línea de comandos de Windows.
Su aplicación React Native, cuando se construye, crea un paquete que contiene sus componentes JavaScript personalizados. Para ejecutar la aplicación con JavaScript y el código nativo hablando entre sí, inicie el servidor de desarrollo de React Native.
- En una ventana de Terminal en macOS o en el símbolo del sistema en Windows, cambie al directorio raíz de su aplicación. En nuestro caso, es FirstReact.
- Ejecute uno de los siguientes comandos:
-
yarn start o npm start
Cuando la línea de comandos indique “Loading dependency graph, done” (Cargando gráfico de dependencia, listo), puede ejecutar la aplicación desde su entorno de desarrollo.
- Para iniciar una aplicación forcereact iOS:
- En Xcode, abra FirstReact/ios/FirstReact.xcworkspace.
- Haga clic en Ejecutar.
- Para iniciar una aplicación forcereact Android:
- Desde la pantalla Android Studio Welcome, o desde el elemento de menú File | Open (Archivo | Abrir), navegue a FirstReact/android/.
- Haga clic en Aceptar.
- Haga clic en Ejecutar.
Cuando aparezca la pantalla de inicio de sesión, ingrese sus credenciales de su organización de Developer Edition. Cuando se le solicite, autorice a la aplicación a acceder a datos y aparecerá una pantalla de vista de lista.
Ahí está: ¡su aplicación React Native con Mobile SDK nuevecita!
Un momento, ¿dónde están mis archivos JavaScript?
Si navegó por su proyecto en Xcode o Android Studio, probablemente se esté preguntando: ¿Dónde están los archivos JavaScript y de marca de React Native? No los encontrará en el proyecto de Xcode o Android Studio. Ya que estos archivos JavaScript pueden compartirse entre aplicaciones de iOS y Android, se crean en un nivel superior y solo se hace referencia a ellos en la configuración de compilación del proyecto. Busque el archivo app.tsx en el mismo nivel que la carpeta ios/ o android/.
Componentes React Native para Mobile SDK
Cuando examina el archivo app.js, algunas de las primeras líneas de código que encuentra importan el ingrediente especial de Mobile SDK. Mobile SDK proporciona componentes JavaScript que permiten que las aplicaciones React Native accedan a funciones de Mobile SDK. Los componentes incluyen:
- react.force.oauth.ts (inicio de sesión, identidad y autenticación)
- react.force.net.ts (clases auxiliares y utilidades de la API de REST)
- react.force.smartstore.ts (función de caché sin conexión SmartStore)
- react.force.mobilesync.ts (función de sincronización offline de Mobile Sync)
Del mismo modo que los componentes Mobile SDK empleados en aplicaciones híbridas, estos componentes definen los puentes desde JavaScript al código nativo de Mobile SDK. Los importa en su archivo app.tsx desde la biblioteca react-native-force. Por ejemplo, para importar todos los componentes, utiliza:
import {oauth, net, smartstore, mobilesync} from 'react-native-force';Usted especifica la ruta de acceso a los componentes react-native-force en la sección dependencies del archivo package.json del nivel raíz de su aplicación. Normalmente, utiliza el repositorio SalesforceMobileSDK-ReactNative.gitrepo:
... "react-native-force": "git+https://github.com/forcedotcom/SalesforceMobileSDK-ReactNative.git#v9.0.0" ...
Si bifurcó este repositorio de forma local, puede establecer esta ruta como su bifurcación local.
No puede utilizar la biblioteca force.js con React Native.
Pruebas en tiempo real
Ahora, vamos a divertirnos.
Desde el directorio raíz de su aplicación, abra el archivo app.tsx en un editor de texto. Localice la definición del objeto styles cerca del final del archivo.
const styles = StyleSheet.create({
container: {
flex: 1,
paddingTop: 22,
backgroundColor: 'white',
},
item: {
padding: 10,
fontSize: 18,
height: 44,
},En la propiedad item de este objeto, agregue una línea que establezca backgroundColor en 'red' (rojo):
const styles = StyleSheet.create({
...
item: {
padding: 10,
fontSize: 18,
height: 44,
backgroundColor: 'red',
}
});Cambie de nuevo a su simulador de iOS y pulse Comando-R. ¿Ve el fondo de color rojo?
Puede realizar una vista previa de los cambios que guarde en la fuente JavaScript de React Native simplemente actualizando el emulador o el simulador.
Recursos