Windows下Expo模拟器运行react-native-camera报CameraManager.Aspect错误求助

嘿，我一眼就看出问题所在了——你现在用的是Expo管理的React Native项目，但却尝试使用需要原生链接的react-native-camera库，这完全不匹配！Expo封装了整个开发环境，不允许手动修改iOS/Android原生配置（也就是你之前教程里的Xcode步骤），而Windows上本来也没有Xcode来完成那些操作，这就是为什么你会碰到Undefined is not an object (evaluating 'CameraManager.Aspect')这个错误。

下面是针对Expo环境的正确解决方案，几步就能搞定：

1. 先卸载原生的react-native-camera #

把之前装的原生库删掉，避免和Expo的相机库冲突：

npm uninstall react-native-camera --save

2. 改用Expo官方的Camera API #

Expo提供了自己的expo-camera库，完美适配Expo环境，不需要任何原生配置，直接就能用：

• 先安装依赖：

expo install expo-camera

• 然后修改你的代码，替换成Expo Camera的逻辑：

import React, { Component } from 'react';
import { Text, View, TouchableOpacity } from 'react-native';
import { Camera } from 'expo-camera'; // 导入Expo官方的Camera组件
import * as Permissions from 'expo-permissions'; // 使用Expo的权限申请模块

const myStyle = {
  container: { flex: 1, flexDirection: 'row' },
  preview: { flex: 1, justifyContent: 'flex-end', alignItems: 'center' },
  capture: { flex: 0, backgroundColor: '#fff', borderRadius: 5, color: 'red', padding: 10, margin: 40 }
};

export default class CameraAccess extends Component {
  constructor(props) {
    super(props);
    this.state = {
      hasCameraPermission: null,
      type: Camera.Constants.Type.back,
    };
  }

  async componentWillMount() {
    const { status } = await Permissions.askAsync(Permissions.CAMERA);
    this.setState({ hasCameraPermission: status === 'granted' });
  }

  render() {
    const { hasCameraPermission } = this.state;
    if (hasCameraPermission === null) {
      return <View />;
    } else if (hasCameraPermission === false) {
      return <Text>No access to camera</Text>;
    } else {
      return (
        <View style={{ flex: 1 }}>
          <Camera style={{ flex: 1 }} type={this.state.type}>
            <View style={{
              flex: 1,
              backgroundColor: 'transparent',
              flexDirection: 'row',
              justifyContent: 'space-between'
            }}>
              <TouchableOpacity
                style={{ flex: 0.1, alignSelf: 'flex-end', alignItems: 'center' }}
                onPress={() => {
                  this.setState({
                    type: this.state.type === Camera.Constants.Type.back
                      ? Camera.Constants.Type.front
                      : Camera.Constants.Type.back,
                  });
                }}
              >
                <Text style={{ fontSize: 18, marginBottom: 10, color: 'white' }}> Flip </Text>
              </TouchableOpacity>
              <TouchableOpacity
                onPress={() => { this.props.navigator.push({ id: 'MenuPrincipal' }); }}
                style={{ alignSelf: 'flex-end', alignItems: 'center', backgroundColor: 'transparent' }}
              >
                <Text style={{ fontSize: 18, marginBottom: 10, color: 'white' }}>[Back]</Text>
              </TouchableOpacity>
            </View>
          </Camera>
        </View>
      );
    }
  }
}

3. 重新运行项目 #

执行下面的命令重启Expo服务：

expo start

然后在你的iPhone 6 Plus模拟器里重新加载项目，相机功能应该就能正常工作了。

补充说明：为什么原来的方法行不通？ #

你之前看的是裸React Native项目的配置教程，这类项目需要手动去Xcode/Android Studio里做原生库链接、头文件配置等操作，但Expo管理的项目是“黑盒”式的，不允许直接修改原生代码，也不需要手动链接依赖。加上Windows上没有Xcode，本来也没法完成iOS原生配置，所以必须用Expo官方提供的适配库才行。

内容的提问来源于stack exchange，提问作者Bráulio Joelson