Skip to main content

Início rápido

Integração#

A integração do módulo R2U AR no React Native é feita pela biblioteca @r2u/react-native-ar-sdk

Pre-requisitos#

O SDK usa os pacotes react-native-device-info e React Native Async Storage para coletar informações e controlar a sessão para enviar dados ao Analytics. Certifique-se de tê-los instalados em seu aplicativo:

  • Adicionar pacotes com yarn
yarn add react-native-device-info
yarn add @react-native-async-storage/async-storage
npx pod-install

Instalação#

Adicione o módulo ao seu projeto de aplicativo e siga as instruções adicionais para iOS e Android.

# com npm
npm install @r2u/react-native-ar-sdk
# com yarn
yarn add @r2u/react-native-ar-sdk

iOS#

  1. Adicione a solicitação de permissão de acesso à câmera em seu Info.plist
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "___">
<plist version="1.0">
<dict>
<key>NSCameraUsageDescription</key>
<string>Câmera usada para exibir o produto em Realidade Aumentada</string>
...
</dict>
</plist>
  1. Instale o pod React Native
cd ios
pod install

Android#

  1. Adicione a solicitação de permissão de acesso à câmera em seu AndroidManifest.xml
<uses-permission android:name="android.permission.CAMERA" />
<application >
...
<!-- Aplicativo "AR Optional", contém funcionalidades não-RA que podem ser usadas quando
o "Google Play Services for AR" (ARCore) não estiver disponível. -->
<meta-data android:name="com.google.ar.core" android:value="optional" />
</application>

Início rápido#

Aqui está um código de exemplo que o ajudará a começar a trabalhar com o mínimo de esforço. Certifique-se de conferir o restante da documentação para obter informações mais detalhadas.

import React, { useEffect, useState } from 'react'
import { Alert, Button, SafeAreaView, ScrollView, StatusBar, StyleSheet, View } from 'react-native'
import { WebView } from 'react-native-webview'
import R2U from '@r2u/react-native-ar-sdk'
const customerId = '5e8e7580404328000882f4ae' // Lembre-se de usar seu ID
const sku = 'RE000001' // Retirado da sua página de produto
const styles = StyleSheet.create({
webview: {
marginTop: 32,
width: 400,
height: 400,
margin: 'auto',
backgroundColor: '#ccc'
}
})
const App: React.FC = () => {
const [init, setInit] = useState(false)
const [isActive, setIsActive] = useState(false)
const [canOpenAR, setCanOpenAR] = useState(false)
const [opened, setOpened] = useState(false)
const [uri, setUri] = useState('')
useEffect(() => {
R2U.init({ customerId }).then(() => {
setInit(true)
})
R2U.ar.isSupported().then((supported) => setCanOpenAR(supported))
}, [])
useEffect(() => {
if (!init) return
R2U.sku.isActive(sku).then((active) => {
setIsActive(active)
})
}, [init])
useEffect(() => {
if (!init || !isActive) return
R2U.viewer.getLink(sku).then((link) => {
setUri(link)
})
}, [isActive])
useEffect(() => {
if (opened)
R2U.ar
.open({ sku, resize: false })
.then(() => setOpened(false))
.catch(() => {
Alert.alert('An error has occurred')
setOpened(false)
})
}, [opened])
return (
<SafeAreaView>
<StatusBar barStyle={'light-content'} />
<ScrollView contentInsetAdjustmentBehavior='automatic'>
<View>{uri ? <WebView style={styles.webview} source={{ uri }} /> : null}</View>
<Button
title={opened ? 'Loading ...' : 'View in your space'}
onPress={() => setOpened(true)}
disabled={!init || !isActive || !canOpenAR || opened}
></Button>
</ScrollView>
</SafeAreaView>
)
}
export default App