一、搭建项目

注意项目名称的规范

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

搭建react-native项目并手动集成viroReact(android版)相关推荐

react native项目改名（仅针对android）
我们在创建react native新项目时,都会使用react-native init 工程名来初始化项目.有时候,我们仅仅是想调试一个小功能,又不想影响以前的项目.这种情况下,我们首先想到的是,拷 ...
[转] 在Mac上搭建React Native开发环境
原文链接: http://blog.csdn.net/xiangzhihong8/article/details/53914336 概述前面我们介绍过在window环境下开发React Native ...
Mac M1 搭建 React Native 环境
Mac M1 搭建 React Native 环境环境安装可以参考对照官方文档,本文针对M1芯片目前未完全适配情况下的方案,算是临时解决方案,不具有时效性. 你需要自行准备的依赖:Xcode &g ...
在windows上搭建React Native开发环境
最近要学习React Native,但是在window上搭建开发环境的时候遇到了些问题,以至于一直没有搭建好开发环境. React Native相关项目及文档: react-native的GitHub ...
React Native 项目整合 CodePush 完全指南
作者 | 钱凯杏仁移动开发工程师,前嵌入式工程师,关注大前端技术新潮流. 本文使用的环境: React@16.3.1 React Native@0.55.4 react-native-code-pu ...
【腾讯Bugly干货分享】React Native项目实战总结
本文来自于腾讯bugly开发者社区,非经作者同意,请勿转载,原文地址:http://dev.qq.com/topic/577e16a7640ad7b4682c64a7 "8小时内拼工作,8小 ...
React native 项目进阶(redux, redux saga, redux logger)
之前利用知乎日报的api写了react-native的一个入门项目,传送文章地址React Native 项目入门和源码地址RN入门项目源码,目前github上的代码已经在原文的基础上增加了新的功能, ...
React Native 项目常用第三方组件汇总
React Native 项目常用第三方组件汇总 https://www.jianshu.com/p/d9cd9a868764?utm_campaign=maleskine&utm_conte ...
Android之Windows下搭建React Native Android开发环境（差不多搞了一天）
Android之Windows下搭建React Native Android开发环境穷逼买不起mac,但是他们都说React Native Android只能在mac下面 ...

搭建react-native项目并手动集成viroReact(android版)

一、搭建项目

二、安装viroReact

三、手动配置viroReact

四、连接设备启动

搭建react-native项目并手动集成viroReact(android版)相关推荐

最新文章

热门文章