是否有可用于世博会和React Native的AR库？

Question

我的朋友和我目前正在尝试制作一个精灵宝可梦Go的克隆。我们的游戏包括玩家和口袋妖怪产卵的实时地图(使用React本地地图和世博会完成)和口袋妖怪战斗组件。我们的问题在于后者-我们正在尝试将3D精灵模型渲染到玩家的相机上(例如AR)。

然而，在几个版本之前，世博会对AR+3D模型的原生支持似乎已经被弃用，我们研究的其他解决方案(例如病毒)似乎与世博会(我们严重依赖)不兼容。

最近有没有人尝试用AR + React Native/Expo做一些事情，对我们可以研究的工具/技术有什么建议？

Answer 1

这可以通过对你expo eject的项目使用Viro React来完成。您仍然可以使用所有现有的expo代码，但您将使用Expo Bare Workflow，而不是Managed Workflow。

下面是这些步骤的大致轮廓：

• 在现有项目上运行expo eject (您仍然可以使用Expo Go开发任何不使用AR的视图)
• 运行npx pod-install。每当你添加一个带有本地模块的库时，你都需要重新运行这个命令。
• 通过USB插入你的iOS设备，并使用npx react-native run-ios --device构建你的应用程序来安装你的应用程序(该过程类似于安卓设备)。iOS和安卓模拟器不支持AR。
• 上面的命令会自动启动麦德龙(它捆绑并服务于你的JS资产)，你应该会得到一个类似于你使用Expo Go时的热重新加载。如果您停止了metro，您可以随时使用npx react-native start.

重新启动它

恭喜！现在，您已经有了一个世博会裸工作流。你应该仍然能够运行expo start并在Expo Go中打开你的应用程序，而且你的设备上应该安装了你的应用程序的开发版本。

只有当你完成上面的工作后，你才应该尝试添加Viro React：

应用程序运行yarn add @viro-community/react-viro

• Run npx pod-install (请记住，每次使用本机应用程序添加新库时，请在现有

中添加新的AR视图(以及导航到该视图的链接

你的"hello，world“视图应该如下所示：

import React, { FC, useState } from "react";
import { StyleSheet, Text, View } from "react-native";
import {
  ViroARScene,
  ViroARSceneNavigator,
  ViroConstants,
  ViroFlexView,
  ViroImage,
} from '@viro-community/react-viro';

interface MyARViewProps {
  foo: string | undefined
}

const ARView: FC<MyARViewProps> = (
  props: MyARViewProps
) => {
  return (
      <View style={{flex: 1}}>
        <ViroARSceneNavigator
            autofocus={true}
            initialScene={{
              scene: HelloWorldSceneAR,
            }}
            style={styles.f1}
        />
        <View style={[styles.buttons]}>
          <View style={[styles.button]}>
            <Text style={[styles.buttonLabel]}>A button</Text>
          </View>
        </View>
      </View>
  );
};

export default ARView;

const HelloWorldSceneAR = () => {
  const [tracking, setTracking] = useState(false);

  function onInitialized(state, reason) {
    if (state === ViroConstants.TRACKING_NORMAL) {
      setTracking(true);
    } else if (state === ViroConstants.TRACKING_NONE) {
      setTracking(false)
    }
  }

  return (
    <ViroARScene onTrackingUpdated={onInitialized}>
      {tracking && (<ViroFlexView
          style={{flexDirection: 'row', padding: 0.1}}
          width={2.0}
          height={.4}
          position={[0, 0.25, -1]}
      >
        <ViroText text="hello, world" />
      </ViroFlexView>)}
    </ViroARScene>
  );
};

let styles = StyleSheet.create({
  container: {
    marginHorizontal: 10,
    alignItems: "center"
  },
  buttons: {
    height: 100,
    width: '100%',
    display: 'flex',
    flexDirection: 'row',
    justifyContent: 'center',
    position: 'absolute',
    bottom: 0,
    left: 0,
  },
  button: {
    height: 100,
    width: 100,
    borderRadius: 50,
    display: 'flex',
    flexDirection: 'column',
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#123456',
  },
  buttonLabel: {
    color: '#ffffff',
    fontSize: 16,
  },
  f1: {flex: 1},
  helloWorldTextStyle: {
    fontFamily: 'Arial',
    fontSize: 128,
    color: '#ffffff',
    textAlignVertical: 'center',
    textAlign: 'center',
  },
});