@appboxo/react-native-sdk

Boxo SDK 反应原生

在Boxo SDK上为IOS和Android装有反应原生包装.

开始 :

yarn add @appboxo/react-native-sdk 

或者说

npm install @appboxo/react-native-sdk 

IOS 下一个:

cd ios && pod install

用法 :

import React from 'react';
import Boxo from '@appboxo/react-native-sdk';
import { StyleSheet, View, Button } from 'react-native';

export default function App() {

  React.useEffect(() => {
    Boxo.setConfig('[client_id]', false);  //set your Boxo client_id, sandbox mode (by default is "false")
  }, [])

  const handleOpenMiniapp = () => {
    Boxo.openMiniapp('[miniapp_id]', {'key': 'value'});  //launch miniapp by id with data as {[key: string]: any} | undefined that is sent to miniapp.
  }

  return (
    <View style={styles.container}>
      <Button
        color="#841584"
        title="Launch miniapp"
        onPress={handleOpenMiniapp}
        accessibilityLabel="Launch miniapp"
    />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    backgroundColor: '#fff',
    justifyContent: 'center',
  },
});

倾听小型应用生命周期事件:

重要

1.0.8+版本的小型应用生命周期事件

import React from 'react';
import Boxo from '@appboxo/react-native-sdk';
import { StyleSheet, View, Button } from 'react-native';

export default function App() {

  React.useEffect(() => {
    Boxo.setConfig('[client_id]', false);  //set your Boxo client_id, sandbox mode
    
    const subscription = Boxo.lifecycleHooksListener({
      onLaunch: (appId: string) => console.log('onLaunch', appId),  // called when the miniapp will launch with openMiniapp(...)
      onResume: (appId: string) => console.log('onResume', appId),  // called when the miniapp will start interacting with the user
      onPause: (appId: string) => console.log('onPause', appId),    // called when clicked close button in miniapp or when destroyed miniapp activity
      onClose: (appId: string) => console.log('onClose', appId),    // called when the miniapp loses foreground state
      onAuth: (appId: string) => console.log('onAuth', appId),    // called when authorization flow starts
      onError: (appId: string, error: string) => console.log('onError', appId, error),  // handle error
    });

    return () => subscription();
  }, [])

  const handleOpenMiniapp = () => {
    Boxo.openMiniapp('[miniapp_id]');  //launch miniapp by id
  }

  return (
    <View style={styles.container}>
      <Button
        color="#841584"
        title="Launch miniapp"
        onPress={handleOpenMiniapp}
        accessibilityLabel="Launch miniapp"
    />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    backgroundColor: '#fff',
    justifyContent: 'center',
  },
});