Téléchargez les fichiers React Native Integration sur https://github.com/Crowdhandler/ch-react-native-integration/releases/download/1.0.0/ch-react-native-integration.zip et ajoutez le dossier ch-react-native-integration à votre projet.
Dans cet exemple, nous allons utiliser CrowdHandler pour protéger certains produits dans une application de commerce électronique. La salle d'attente s'activera pour les produits sélectionnés lorsque l'utilisateur invoquera la navigation.
1. Configurer le fournisseur CrowdHandler
Importez le CrowdHandlerProvider dans le niveau supérieur de votre application.
App.js
import { CrowdHandlerProvider } from './ch-react-native-integration';Créez un objet dans votre application pour gérer les événements.
Ces événements sont appelés par CrowdHandler pour vous permettre de répondre à l'état.
Il existe deux récepteurs d'événements obligatoires.
onWait() - Appelé lorsque CrowdHandler détecte qu'un utilisateur doit être envoyé à l'écran de la salle d'attente.
onRedirect() - Appelé lorsque CrowdHandler détecte qu'un utilisateur doit être envoyé vers l'écran que vous protégez.
En option, vous pouvez utiliser deux autres écouteurs d'événements, onRequestStart() et onRequestEnd().
Elles sont appelées avant et après la demande de CrowdHandler et sont utiles pour montrer à l'utilisateur qu'une activité est en cours.
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
};
...et créer des fonctions pour gérer les événements.
Ici, nous définissons le nom de l'écran de la salle d'attente sur "CHWaitingRoom".
Veillez à ce que ce nom soit identique à celui de l'écran dans votre pile de navigation.
La réponse ch_response renvoyée par la fonction onWait contient une propriété appelée referer. Nous l'utilisons pour déterminer si la pile de navigation doit remplacer l'historique. Si la redirection provient de la salle d'attente, nous ne voulons pas que l'utilisateur retourne dans la salle d'attente lorsqu'il clique sur le bouton "retour".
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);
}
}Enveloppez votre application avec le composant CrowdHandlerProvider en passant l'objet d'événement créé plus tôt, CHEvents, et votre clé d'api publique comme props. Optionnellement, vous pouvez ajouter une valeur pour `timeout` en millisecondes. Ceci indique à CrowdHandler de rediriger vers l'écran protégé dans le cas d'un timeout de l'api ou d'une requête lente. Si cette valeur n'est pas définie, la valeur par défaut est 3000ms (ou 3 secondes).
App.js
<CrowdHandlerProvider
timeout={3000}
chEvents={CHEvents}
apiKey={"04b39378b6abc3d4ee870824371646a9d1e157b1a7720821add4c260108ebd48"}>
<NavigationStack/>
</CrowdHandlerProvider>2. Ajoutez la WebView CrowdHandler à votre pile de navigation.
Importez le composant CHWebView à l'endroit où vous créez votre pile de navigation
import {CHWebView} from './ch-react-native-integration';CHWebView est un composant qui renvoie un composant WebView et nécessite react-native-webview comme dépendance .
Pour installer react-native-webview, exécutez
yarn add react-native-webview
ou
npm install --save react-native-webview
Plus d'informations sur react-native-webview sont disponibles ici
https://github.com/react-native-webview/react-native-webview/blob/master/docs/Getting-Started.md
Sur votre pile de navigation, vous aurez besoin d'un écran pour la salle d'attente. Définissez la propriété name avec la même valeur que celle que vous avez définie dans la fonction `launchWaitingRoomScreen` ci-dessus, nous l'avons définie à CHWaitingRoom.
Importez le composant CHWebView et définissez le composant prop de l'écran sur le composant 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. Intercepter les clics de navigation
Pour les pages que vous souhaitez protéger, vous devez intercepter l'interaction de navigation de l'utilisateur et vérifier avec CrowdHandler avant de lui montrer l'écran désiré. Pour ce faire, importez le contexte `useCrowdHandler` du fichier CrowdHandlerGatekeeper dans le composant d'écran qui gère l'entrée de navigation.
ProductsScreen.js
import { useCrowdHandler } from "./ch-react-native-integration";puis introduire le contexte CrowdHandler dans le composant écran.
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);
...Ajoutez une fonction pour gérer les cas où un utilisateur clique sur un élément de navigation qui l'amène à un écran que vous souhaitez protéger.
C'est une bonne idée de vérifier si l'écran vers lequel vous naviguez possède une propriété slug ou url.
Si ce n'est pas le cas, il n'est pas nécessaire de vérifier avec 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)
}
}
...et ajoutez ce gestionnaire à l'événement onPress du bouton.
Crowdhandler peut protéger les écrans en se basant sur le slug Salle d'attente ou sur l'url que vous souhaitez protéger.
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. La mise en place de l'ensemble.
Dans cette implémentation, lorsqu'un utilisateur appuie sur le bouton, la fonction handleCheckWithCrowdHandler() est appelée, en passant l'objet produit comme argument, c'est-à-dire
{
slug: '0MAID6M2iMjNW1WZs', // waiting room slug from crowdhander admin
redirect: 'ProductScreen', // the screen to redirect to
title: 'Hiking Boots',
productID: 'pct_000112312'
}
CrowdHandler effectue ensuite une vérification basée sur la propriété slug ou url de l'objet.
Si l'utilisateur doit attendre, l'événement onWait(), défini dans App.js, est appelé. Cet événement est géré par le gestionnaire launchWaitingRoom(), également défini dans App.js. L'écran CHWaitingRoom s'affiche et charge la salle d'attente.
Si l'utilisateur peut accéder à l'écran protégé, la fonction onRedirect() est appelée et l'utilisateur est dirigé vers l'écran spécifié dans l'objet produit, dans ce cas ProductScreen.