React Native Expo点击按钮报错TypeError: Cannot read property 'Type' of undefined求助

问题场景 #

使用Expo开发React Native应用时，点击按钮触发相机页面渲染时出现错误：

Warning: TypeError: Cannot read property 'Type' of undefined

相关代码 #

按钮组件代码

<TouchableOpacity style={[styles.menuItem, styles.activeMenu]} onPress={handleCameraScanIn}>
  <Icon name="chart-line" size={20} color="#fff" />
  <Text style={styles.menuText}>Live Overview</Text>
</TouchableOpacity>

CameraScanIn.js代码

import React, { useState, useEffect } from 'react';
import { View, Text, StyleSheet } from 'react-native';
import { Camera } from 'expo-camera';

export default function CameraScan() {
  const [hasPermission, setHasPermission] = useState(null);
  const [cameraRef, setCameraRef] = useState(null);

  // Request camera permissions on mount
  useEffect(() => {
    (async () => {
      const { status } = await Camera.requestCameraPermissionsAsync();
      setHasPermission(status === 'granted');
    })();
  }, []);

  if (hasPermission === null) {
    return <Text>Requesting camera permission...</Text>;
  }
  if (hasPermission === false) {
    return <Text>No access to camera</Text>;
  }

  return (
    <View style={styles.container}>
      <Camera style={styles.camera} ref={(ref) => setCameraRef(ref)} />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  camera: {
    flex: 1,
    width: '100%',
  },
});

package.json配置

{
  "name": "camerascanner",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "@expo/metro-runtime": "~4.0.0",
    "@react-navigation/native": "^7.0.3",
    "@react-navigation/stack": "^7.0.3",
    "axios": "^1.7.7",
    "expo": "^52.0.7",
    "expo-camera": "~16.0.5",
    "expo-image-manipulator": "^13.0.5",
    "firebase": "^11.0.2",
    "react-dom": "18.3.1",
    "react-native-paper": "^5.12.5",
    "react-native-safe-area-context": "^4.14.0",
    "react-native-screens": "^4.1.0",
    "react-native-vector-icons": "^10.2.0",
    "react-native-web": "~0.19.13",
    "react-navigation": "^4.4.4",
    "react-navigation-stack": "^2.10.4"
  },
  "devDependencies": {
    "@babel/core": "^7.24.0"
  }
}

解决方案 #

1. 解决导航库版本冲突 #

package.json中同时安装了React Navigation v7（@react-navigation/native、@react-navigation/stack）和React Navigation v4（react-navigation、react-navigation-stack），两个版本完全不兼容，会导致依赖冲突引发错误。

修复步骤：

• 卸载旧版v4依赖：

  npm uninstall react-navigation react-navigation-stack
  # 或使用yarn
  yarn remove react-navigation react-navigation-stack
  

• 确保项目使用React Navigation v7的API配置导航，示例：

  import { NavigationContainer } from '@react-navigation/native';
  import { createStackNavigator } from '@react-navigation/stack';
  import CameraScan from './CameraScanIn';
  
  const Stack = createStackNavigator();
  
  function App() {
    return (
      <NavigationContainer>
        <Stack.Navigator initialRouteName="Home">
          <Stack.Screen name="Home" component={HomeScreen} />
          <Stack.Screen name="CameraScan" component={CameraScan} />
        </Stack.Navigator>
      </NavigationContainer>
    );
  }
  

2. 更新expo-camera到兼容版本 #

Expo SDK 52对应的expo-camera兼容版本为~16.0.8，当前使用的~16.0.5可能存在API兼容问题。

修复步骤：

• 修改package.json中expo-camera版本为：

  "expo-camera": "~16.0.8"
  

• 重新安装依赖：

  npm install
  # 或使用yarn
  yarn install
  

3. 完善Camera组件配置 #

Expo Camera v16+需要明确指定相机类型属性，否则可能触发未定义属性错误。

修改CameraScan组件的返回部分，添加type属性：

return (
  <View style={styles.container}>
    <Camera 
      style={styles.camera} 
      ref={(ref) => setCameraRef(ref)}
      type={Camera.Constants.Type.back} // 指定后置相机
    />
  </View>
);

4. 重启项目清除缓存 #

完成上述修改后，清除Expo缓存并重启项目：

npx expo start --clear

内容的提问来源于stack exchange，提问作者geeeeen