Configuración de React Native

Descarga los archivos de integración de React Native desde https://github.com/Crowdhandler/ch-react-native-integration/releases/download/1.0.0/ch-react-native-integration.zip y añade la carpeta «ch-react-native-integration» a tu proyecto.

En este ejemplo vamos a utilizar CrowdHandler para proteger determinados productos en una aplicación de comercio electrónico. La sala de espera se activará para los productos seleccionados cuando el usuario acceda a la navegación.

1. Configurar el CrowdHandler#

Importa CrowdHandlerProvider en el nivel superior de tu aplicación.

App.js

import { CrowdHandlerProvider } from './ch-react-native-integration';

Crea un objeto dentro de tu aplicación para gestionar los eventos.

CrowdHandler activa estos eventos para que puedas responder al estado.

Hay dos detectores de eventos obligatorios.

onWait() - Se invoca cuando CrowdHandler detecta que se debe enviar a un usuario a la pantalla de la sala de espera

onRedirect() - Se invoca cuando CrowdHandler detecta que se debe redirigir a un usuario a la pantalla que estás protegiendo.

Además, hay otros dos detectores de eventos que puedes utilizar: onRequestStart() y onRequestEnd().

Se ejecutan antes y después de que se haya realizado la solicitud a CrowdHandler y resultan útiles para indicar al usuario que se está produciendo alguna actividad.

App.js

export default function App() {

    const CHEvents = {
        navigation: null, // holds the navigation stack so CrowdHandler can redirect the correct screens
        onWait: function (ch_response) { // required
            launchWaitingRoomScreen(ch_response);
        },
        onRedirect: function (ch_response) { // required
            redirectToScreen(ch_response);
        },
        onRequestStart: function () {}, //optional
        onRequestEnd: function () {} // optional
    };
...

y crear funciones para gestionar los eventos.

Aquí estamos configurando el nombre de la pantalla de la sala de espera como «CHWaitingRoom».

Asegúrate de que este nombre coincida con el nombre de la pantalla de tu pila de navegación.

El ch_response devueltos por el onWait La función contiene una propiedad denominada referente. Utilizamos esto para determinar si la pila de navegación debe sustituir al historial. Si la redirección procede de la sala de espera, no queremos que el usuario vuelva a la sala de espera al hacer clic en el botón «Atrás».

App.js

const launchWaitingRoomScreen = (ch_response) => {
    ch_response.navigation.navigate('CHWaitingRoom', { ...ch_response.screen_config });
}
const redirectToScreen = (ch_response) => {
    if(ch_response.referer === 'waiting_room') {
      ch_response.navigation.replace(ch_response.screen_config.redirect, ch_response.screen_config);
    } else {
      ch_response.navigation.navigate(ch_response.screen_config.redirect, ch_response.screen_config);
    }
}

Envuelve tu aplicación con el componente CrowdHandlerProvider, pasándole como props el objeto de eventos creado anteriormente, CHEvents, y tu clave pública de API. Si lo deseas, puedes añadir un valor para tiempo de espera en milisegundos. Esto indica a CrowdHandler que redirija a la pantalla protegida en caso de que se agote el tiempo de espera de la API o de que la solicitud sea lenta. Si no se especifica, el valor por defecto es de 3000 ms (o 3 segundos).

App.js

<CrowdHandlerProvider
    timeout={3000}
    chEvents={CHEvents}
    apiKey={"04b39378b6abc3d4ee870824371646a9d1e157b1a7720821add4c260108ebd48"}>
    <NavigationStack/>
</CrowdHandlerProvider>

2. Añade el WebView de CrowdHandler a tu pila de navegación.

Importa el componente CHWebView en el lugar donde estés creando tu pila de navegación

NavigationStack.js

import {CHWebView} from './ch-react-native-integration';

CHWebView es un componente que devuelve un componente WebView y requiere react-native-webview como dependencia.

Para instalar react-native-webview, ejecuta

yarn add react-native-webview

o

npm install --save react-native-webview

Puedes encontrar más información sobre react-native-webview aquí

https://github.com/react-native-webview/react-native-webview/blob/master/docs/Getting-Started.md

En tu pila de navegación necesitarás una pantalla para la «Sala de espera». Establece la propiedad «name» con el mismo valor que has establecido en el <span>launchWaitingRoomScreen</span> En la función anterior, la hemos configurado como CHWaitingRoom.

Importa el componente CHWebView y asigna el atributo «component prop» de la pantalla al componente CHWebView.

This is the screen that the user will see if they are required to wait so its important that the name of the screen matches the name you specified in the method called by the onWait event in App.js. i.e. <Stack.Screen name="CHWaitingRoom" component={CHWebView} />

NavigationStack.js

...
<Stack.Navigator>
    <Stack.Screen name="Home" component={HomeScreen}/>
    <Stack.Screen name="Details" component={ProductsScreen}/>
    <Stack.Screen name="ProductScreen" component={ProductScreen} />
    <Stack.Screen name="CHWaitingRoom" component={CHWebView} />
</Stack.Navigator>
...

3. Interceptar de navegación#

Para las páginas que desees proteger, debes interceptar la acción de navegación del usuario y consultar con CrowdHandler antes de mostrarle la pantalla deseada. Para ello, importa el useCrowdHandler contexto del archivo CrowdHandlerGatekeeper al componente de pantalla que gestiona la entrada de navegación.

ProductsScreen.js

import { useCrowdHandler } from "./ch-react-native-integration";

A continuación, incorpora el contexto de CrowdHandler al componente de pantalla.

ProductsScreen.js

export const ProductsScreen = ({ navigation }) => {

    const crowdhandler_gatekeeper = useCrowdHandler();

    // pass a reference of navigation to the gatekeeper
    // this allows CrowdHandler to redirect the user to the correct screen
    crowdhandler_gatekeeper.setNavigation(navigation);
...

Añade una función que gestione el caso en el que un usuario haga clic en un elemento de navegación que le lleve a una pantalla que quieras proteger.

Es recomendable comprobar si la pantalla a la que te estás dirigiendo tiene una propiedad «slug» o una propiedad «url». Si no es así, no hace falta consultarlo con CrowdHandler.

ProductsScreen.js

export const ProductsScreen = ({ navigation }) => {
    const crowdhandler_gatekeeper = useCrowdHandler();

    // pass a reference of navigation to the gatekeeper
    // this allows CrowdHandler to redirect the user to the correct screen
    crowdhandler_gatekeeper.setNavigation(navigation);

    const handleCheckWithCrowdHandler = async (product) => {
        if (product.slug || product.url) {
            await crowdhandler_gatekeeper.redirectOrWait(product);
        } else {
            navigation.navigate(product.redirect, product)
        }
    }
...

y añade este controlador al evento onPress del botón.

Crowdhandler puede proteger pantallas en función del slug de la «Sala de espera» o de la URL que quieras proteger.

ProductsScreen.js

// A collection of products
// Minimum requirements are that they have the waiting room slug or URL to protect
// and a screen to redirect to
// Analogous to params that are sent to react-navigator and any
// params that are set here are sent to the navigator on redirect

const products = [
    {
        slug: '0MAID6M2iMjNW1WZs', // waiting room slug from crowdhander admin
        redirect: 'ProductScreen', // the screen to redirect to
        title: 'Hiking Boots',
        productID: 'pct_000112312'
    }, {
        url: 'https://example.com/products/protected/page', // URL to protect -  set in crowdhander admin
        redirect: 'ProductScreen',
        // the screen to redirect to
        title: 'Head Torch',
        productID: 'pct_030112552'
    }
]

{products.map((product) => {
    return (
        <Button
            key={product.productID}
            onPress = { () => {
                handleCheckWithCrowdHandler(product)} // send the data to check
            }
        >
        {product.title}
        </Button>
    )
})}
...

4. Ponerlo todo en su sitio.

En esta implementación, cuando un usuario pulsa el botón, se llama a la función ` handleCheckWithCrowdHandler()`, pasándole el objeto del producto como argumento, es decir:

{
		slug: '0MAID6M2iMjNW1WZs', // waiting room slug from crowdhander admin
    	redirect: 'ProductScreen', // the screen to redirect to
    	title: 'Hiking Boots',
    	productID: 'pct_000112312'
    }

A continuación, CrowdHandler realiza una comprobación basándose en la propiedad «slug» o en la propiedad «url» del objeto

Si el usuario tiene que esperar el onWait() se invoca el evento que se definió en App.js. De esto se encarga el launchWaitingRoom() controlador, también definido en App.js. Se muestra la pantalla CHWaitingRoom y se carga la sala de espera.

Si el usuario puede acceder a la pantalla protegida onRedirect() se ejecuta y se redirige al usuario a la pantalla especificada en el objeto del producto; en este caso, Pantalla de producto