Skip to content

Integração do React Native

Código de amostra de integração

O código de amostra de integração está disponível aqui https://github.com/finogeeks/PhizClip-react-native-demo

Se o seu ambiente não tem acesso ao Github, você também pode visitar o repositório espelhado no gitee clicando aqui.

1. Obtenha credenciais de applet

É necessário solicitar a SDK KEY e SDK SECRET para utilizar o SDK. Somente se você configurar a SDK KEY e SDK SECRET corretas durante a inicialização do SDK, poderá inicializá-lo com sucesso e utilizá-lo adequadamente

1.1 Criar aplicativo

Uso registrado para fazer login para "Application Management - New Partner Application" Para concluir a criação de aplicação;

Image.png

1.2 Obter chave SDK e SDK secret

Após criar o aplicativo e adicionar o ID do Pacote correspondente, se precisar exportar a chave SDK e o SDK secret correspondentes, selecione Copiar após o ID do Pacote correspondente e cole usando Ctrl+V ou Command+V

Image.png

Entre eles:

  • Chave SDK: são as credenciais para o aplicativo de parceiro poder usar o Applet SDK, se a chave SDK falhar na verificação, toda a API do SDK não será útil.
  • SDK Secert: é uma certificação de segurança para acessar o serviço, não o entregue a terceiros.

Nota

Detalhes sobre a criação de aplicativos e obtenção de SDK KEY e SDK SECRET podem ser encontrados em「Introduction-Operation Guide-Enterprise operation guide-7.」.

2. Integração do plug -in

2.1 Integração de plug-ins

Apresente o plugin do motor de applets Apresente o plugin do React Native applet no arquivo package.json

objectivec
 "react-native-mopsdk" :  "^1.0.4"

Instalação de plug-ins

shell
$ npm install react-native-mopsdk --save
$ react-native link react-native-mopsdk

2.2 Inicializando o mecanismo

Javascript
import MopSDK from 'react-native-mopsdk';
// 1. Introduce NativeModules, NativeEventEmitter
import { NativeModules, NativeEventEmitter } from 'react-native';

// 2. mop initialization
const eventEmitter = new NativeEventEmitter(NativeModules.FINMopSDK);
  MopSDK.initialize({
    appkey:
      'SDK Key Information', // SDK Key
    secret: 'SDK Secret information', // SDK Secret
    apiServer: 'Server Address', // Server Address
    apiPrefix: '/api/v1/mop/', // Server interface request routing prefix
    nativeEventEmitter: eventEmitter,
    finMopSDK: NativeModules.FINMopSDK,
  }).then(res => {
    console.log('Initialization successful')
  }).catch(err => {
    console.log('Initialization failure')
  })

2.3 Abrindo o applet

objectivec
MopSDK.openApplet({appId: 'xxxx'});  // Applet AppID

Nota

  • A SDK KEY e SECRET podem ser obtidas no backend de administração da Community Edition
  • apiServer é o endereço de serviço do backend do applet atual, ou seja, o IP:porta inserido na seção anterior
  • O ID do applet é o identificador único do applet no backend de gerenciamento (gerado automaticamente quando o applet está disponível)
  • Os parâmetros acima podem ser obtidos na interface de backend do servidor de implantação anterior ou no site oficial do PhizClip sem uma implantação de servidor na experiência de registro
  • Importante: você pode encontrar o repositório oficial no Github para visualizar o código de amostra
  • Por favor, note que o Bundle Id do APP precisa ser consistente com aquele adicionado no backend de gerenciamento, o que pode ser verificado em [Terminal Empresarial - Gerenciamento de Aplicações]

3. Perguntas frequentes

  • P: Posso usar outras versões react-native da demo?
  • A: Devido à variação na versão do React Native, recomendamos utilizar a versão 0.67.4 do React Native para executar nosso demo oficial

  • P: Como faço para limpar o cache?
  • R: E para gerenciar o cache, você pode utilizar a Ferramenta de Limpeza do Metro

  • P: O lado do iOS não consegue executar o comando pod install no M1
  • A: Use Arch-x86_64 POD Instale o incid de instalação do pod.