React Native-Konfiguration

Laden Sie die React-Native-Integrationsdateien von GitHub herunter und fügen Sie den Ordner „ch-react-native-integration“ zu Ihrem Projekt hinzu.

In diesem Beispiel werden wir CrowdHandler verwenden, um bestimmte Produkte in einer E-Commerce-App zu schützen. Der Wartemodus wird für ausgewählte Produkte aktiviert, sobald der Nutzer die Navigation aufruft.

1. Konfigurieren Sie den CrowdHandler-Anbieter

Importiere den CrowdHandlerProvider auf der obersten Ebene deiner App.

App.js

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

Erstellen Sie in Ihrer App ein Objekt, um die Ereignisse zu verwalten.

Diese Ereignisse werden von CrowdHandler ausgelöst, damit Sie auf den Status reagieren können.

Es sind 2 Ereignis-Listener erforderlich.

onWait() – Wird aufgerufen, wenn CrowdHandler feststellt, dass ein Benutzer zum Warteraum-Bildschirm weitergeleitet werden soll

onRedirect() – Wird aufgerufen, wenn CrowdHandler feststellt, dass ein Benutzer zu dem Bildschirm weitergeleitet werden soll, den Sie schützen.

Optional stehen zwei weitere Ereignis-Listener zur Verfügung, die Sie nutzen können: onRequestStart() und onRequestEnd().

Diese werden vor und nach der CrowdHandler-Anfrage aufgerufen und sind nützlich, um dem Benutzer anzuzeigen, dass gerade etwas passiert.

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

und Funktionen zur Verarbeitung der Ereignisse erstellen.

Hier legen wir den Namen des Warteraum-Bildschirms auf „CHWaitingRoom“ fest.

Stellen Sie sicher, dass dieser Name mit dem Namen des Bildschirms in Ihrem Navigationsstapel übereinstimmt.

Die ch_response zurückgegeben von der onWait Die Funktion enthält eine Eigenschaft mit dem Namen Referrer. Damit legen wir fest, ob der Navigationsstapel den Verlauf ersetzen soll. Wenn die Weiterleitung aus dem Warteraum erfolgt, möchten wir nicht, dass der Benutzer beim Klicken auf die Zurück-Schaltfläche wieder in den Warteraum gelangt.

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

Hüllen Sie Ihre App in die „CrowdHandlerProvider“-Komponente ein und übergeben Sie dabei das zuvor erstellte Ereignisobjekt „CHEvents“ sowie Ihren öffentlichen API-Schlüssel als Props. Optional können Sie einen Wert für Zeitüberschreitung in Millisekunden. Damit wird CrowdHandler angewiesen, im Falle eines API-Timeouts oder einer langsamen Anfrage auf den geschützten Bildschirm umzuleiten. Ist dieser Wert nicht festgelegt, beträgt der Standardwert 3000 ms (bzw. 3 Sekunden).

App.js

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

2. Fügen Sie die CrowdHandler-WebView zu Ihrem Navigationsstapel hinzu.

Importieren Sie die CHWebView-Komponente an der Stelle, an der Sie Ihren Navigationsstapel erstellen.

NavigationStack.js

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

CHWebView ist eine Komponente, die eine WebView-Komponente zurückgibt und „react-native-webview“ als Abhängigkeit benötigt.

Um react-native-webview zu installieren, führen Sie folgenden Befehl aus:

yarn add react-native-webview

oder

npm install --save react-native-webview

Weitere Informationen zu react-native-webview finden Sie hier

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

In Ihrem Navigations-Stack benötigen Sie einen Bildschirm für den Warteraum. Setzen Sie die Eigenschaft „name“ auf denselben Wert, den Sie in der launchWaitingRoomScreen die obige Funktion; wir haben sie auf „CHWaitingRoom“ gesetzt.

Importieren Sie die CHWebView-Komponente und setzen Sie die „component“-Eigenschaft des Bildschirms auf die CHWebView-Komponente.

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. Navigationsklicks abfangen

Bei Seiten, die Sie schützen möchten, müssen Sie die Navigationsaktion des Benutzers abfangen und dies mit CrowdHandler abklären, bevor Sie ihm den gewünschten Bildschirm anzeigen. Dazu importieren Sie die useCrowdHandler Kontext aus der Datei „CrowdHandlerGatekeeper“ in die Bildschirmkomponente, die die Navigationseingabe verarbeitet.

ProductsScreen.js

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

Fügen Sie anschließend den CrowdHandler-Kontext in die Bildschirmkomponente ein.

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

Fügen Sie eine Funktion hinzu, die die Situation behandelt, wenn ein Benutzer auf ein Navigationselement klickt, das ihn zu einem Bildschirm führt, den Sie schützen möchten.

Es empfiehlt sich, zu prüfen, ob eine Seite, zu der Sie navigieren, über eine „slug“- oder „url“-Eigenschaft verfügt. Ist dies nicht der Fall, besteht keine Notwendigkeit, dies mit CrowdHandler zu überprüfen.

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

und füge diesen Handler dem onPress-Ereignis der Schaltfläche hinzu.

CrowdHandler kann Bildschirme anhand des „Waiting Room“-Slugs oder anhand der URL schützen, die Sie schützen möchten.

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 crowdhandler 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 crowdhandler 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. Alles zusammenfassen.

In dieser Implementierung wird, wenn ein Benutzer die Schaltfläche drückt, die Funktion ` handleCheckWithCrowdHandler() ` aufgerufen, wobei das Produkt-Objekt als Argument übergeben wird, d. h.

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

CrowdHandler führt anschließend eine Überprüfung anhand der Eigenschaft „slug“ oder „url“ des Objekts durch

Wenn der Benutzer warten muss, bis die onWait() Es wird ein Ereignis aufgerufen, das in App.js. Dies wird von der Screen() Handler, ebenfalls definiert in App.js. Der Bildschirm „CHWaitingRoom“ wird angezeigt und der Warteraum geladen.

Wenn der Benutzer Zugriff auf den geschützten Bildschirm hat, onRedirect() wird aufgerufen und der Benutzer wird zu dem im Produkt-Objekt angegebenen Bildschirm weitergeleitet, in diesem Fall Produktbildschirm.

1. Konfigurieren Sie den CrowdHandler-Anbieter#

2. Fügen Sie die CrowdHandler-WebView zu Ihrem Navigationsstapel hinzu.#

3. Navigationsklicks abfangen#

4. Alles zusammenfassen.#

1. Konfigurieren Sie den CrowdHandler-Anbieter

2. Fügen Sie die CrowdHandler-WebView zu Ihrem Navigationsstapel hinzu.

3. Navigationsklicks abfangen

4. Alles zusammenfassen.