[移动开发]搭建react-native项目并手动集成viroReact(android版)

一、搭建项目

注意项目名称的规范

npx react-native init reactDemo --template react-native-template-typescript

注意：最好先将新建的项目在真机上运行一遍，然后再执行下面的步骤

二、安装viroReact

yarn add @viro-community/react-viro

三、手动配置viroReact

设置sdk版本(至少为24)与gradle插件版本(至少为4.1.1)

// 文件位置：android/build.gradle
buildscript{
  ext{
    ...
    minSdkVersion = 24
    ...
  }
  ...
  dependencies{
    classpath('com.android.tools.build:gradle:4.1.1')
  }
}
allprojects {
    repositories {
        jcenter()
        mavenCentral()
        mavenLocal()
        ...
    }
}

android/app/build.gradle

dependencies {
	...
    implementation project(':gvr_common')
    implementation project(':arcore_client')
    implementation project(path: ':react_viro')
    implementation project(path: ':viro_renderer')
    implementation 'com.google.android.exoplayer:exoplayer:2.7.1'
    implementation 'com.google.protobuf.nano:protobuf-javanano:3.0.0-alpha-7'
    ...
}

android/settings.gradle

...
include ':react_viro', ':arcore_client', ':gvr_common', ':viro_renderer'
project(':arcore_client').projectDir = new File('../node_modules/@viro-community/react-viro/android/arcore_client')
project(':gvr_common').projectDir = new File('../node_modules/@viro-community/react-viro/android/gvr_common')
project(':viro_renderer').projectDir = new File('../node_modules/@viro-community/react-viro/android/viro_renderer')
project(':react_viro').projectDir = new File('../node_modules/@viro-community/react-viro/android/react_viro')

android/gradle/wrapper/gradle-wrapper.properties(至少为 6.5)

distributionUrl=https\://services.gradle.org/distributions/gradle-6.5-bin.zip

app/src/main/java/com/projectName/MainApplication.java

...
import com.viromedia.bridge.ReactViroPackage;
...
@Override
protected List<ReactPackage> getPackages() {
  ...
  packages.add(new ReactViroPackage(ReactViroPackage.ViroPlatform.valueOf("AR")));
  ...
}

android/app/src/main/AndroidManifest.xml

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
  ...
  xmlns:tools="http://schemas.android.com/tools"
  ...
  >
    <queries>
        <package android:name="com.google.ar.core" />
    </queries>
    ...
    <uses-permission android:name="android.permission.CAMERA" />
    <uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE"/>
    <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/>
    <uses-feature android:name="android.hardware.camera.ar" />
    <uses-feature android:name="android.hardware.camera" />
    <uses-feature android:name="android.hardware.camera.autofocus" android:required="false" tools:replace="required"/>
    <uses-feature android:glEsVersion="0x00030000" android:required="false" tools:node="remove" tools:replace="required" />
    <uses-feature android:name="android.hardware.sensor.accelerometer" android:required="false" tools:replace="required" />
    <uses-feature android:name="android.hardware.sensor.gyroscope" android:required="false" tools:replace="required" />

    <application
	...
	>
    	<meta-data android:name="com.google.ar.core" android:value="required" />
   		...
    </application>
</manifest>

四、连接设备启动

adb devices
npx react-native run-android