Descargue los archivos de integración de React Native de https://github.com/Crowdhandler/ch-react-native-integration/releases/download/1.0.0/ch-react-native-integration.zip y añada la carpeta ch-react-native-integration a su proyecto.
En este ejemplo vamos a utilizar CrowdHandler para proteger ciertos productos en una aplicación de comercio electrónico. La sala de espera se activará para los productos seleccionados cuando el usuario invoque la navegación.
1. Configurar el proveedor CrowdHandler
Importe el CrowdHandlerProvider en el nivel superior de su App.
App.js
import { CrowdHandlerProvider } from './ch-react-native-integration';Crea un objeto dentro de tu aplicación para gestionar los eventos.
Estos eventos son llamados por CrowdHandler para permitirle responder al estado.
Hay 2 escuchadores de eventos requeridos.
onWait() - Se ejecuta cuando CrowdHandler detecta que un usuario debe ser enviado a la pantalla de la sala de espera.
onRedirect() - Se llama cuando CrowdHandler detecta que un usuario debe ser enviado a la pantalla que está protegiendo.
Opcionalmente hay otros 2 escuchadores de eventos que puedes usar, onRequestStart() y onRequestEnd().
Se llaman antes y después de que se haya realizado la solicitud CrowdHandler y son útiles para mostrar al usuario que se está produciendo 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 manejar los eventos.
Aquí estamos configurando el nombre de la pantalla de la sala de espera a "CHWaitingRoom".
Asegúrese de que este nombre es el mismo que el de la pantalla de su pila de navegación.
El ch_response devuelto por la función onWait contiene una propiedad llamada referer. La utilizamos para determinar si la pila de navegación debe reemplazar al historial. Si la redirección proviene de la sala de espera, entonces no queremos que el usuario regrese a la sala de espera cuando haga 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 pasando el objeto de evento creado anteriormente, CHEvents, y tu clave api pública como props. Opcionalmente puede añadir un valor para `timeout` en milisegundos. Esto le dice a CrowdHandler que redirija a la pantalla protegida en el caso de un tiempo de espera api o una solicitud lenta. Si no se establece, el valor predeterminado es 3000ms (o 3 segundos).
App.js
<CrowdHandlerProvider
timeout={3000}
chEvents={CHEvents}
apiKey={"04b39378b6abc3d4ee870824371646a9d1e157b1a7720821add4c260108ebd48"}>
<NavigationStack/>
</CrowdHandlerProvider>2. Añada el CrowdHandler WebView a su pila de navegación.
Importe el componente CHWebView allí donde vaya a crear su pila de navegación
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 ejecute
yarn add react-native-webview
o
npm install --save react-native-webview
Puede 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 su pila de navegación necesitará una pantalla para la Sala de Espera. Establece la propiedad name con el mismo valor que estableciste en la función `launchWaitingRoomScreen` anterior, nosotros la establecemos como CHWaitingRoom.
Importe el componente CHWebView y establezca el componente prop de la pantalla en el 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} />
...
<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 los clics de navegación
Para las páginas que desee proteger, necesita interceptar la interacción de navegación del usuario y comprobarlo con CrowdHandler antes de mostrarle la pantalla deseada. Para ello, importe el contexto `useCrowdHandler` del archivo CrowdHandlerGatekeeper en el componente de pantalla que está manejando la entrada de navegación.
ProductosPantalla.js
import { useCrowdHandler } from "./ch-react-native-integration";a continuación, llevar el contexto CrowdHandler en el componente de pantalla.
ProductosPantalla.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ñadir una función para manejar cuando un usuario hace clic en un elemento de navegación que le lleva a una pantalla que desea proteger.
Es una buena idea comprobar si una pantalla a la que está navegando tiene una propiedad slug o url.
Si no la tiene, entonces no hay necesidad de comprobarlo con CrowdHandler.
ProductosPantalla.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 manejador al evento onPress del Botón.
Crowdhandler puede proteger las pantallas basándose en el slug de la Sala de Espera o basándose en la url que desea proteger.
ProductosPantalla.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 junto.
En esta implementación, cuando un usuario pulsa el botón, se llama a handleCheckWithCrowdHandler(), pasando el objeto 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'
}
CrowdHandler realiza entonces una comprobación basada en la propiedad slug o url del objeto
Si el usuario debe esperar, se llama al evento onWait () definido en App. js. Esto es manejado por el manejador launchWaitingRoom(), también definido en App. js. La pantalla CHWaitingRoom se muestra, y carga la Sala de Espera.
Si el usuario puede acceder a la pantalla protegida, se llama a onRedirect() y el usuario es dirigido a la pantalla especificada en el objeto producto, en este caso ProductScreen