React Native跨文件未定义问题及相机访问报错求助

Hey there, let's break down your two React Native issues and walk through the fixes step by step. I've seen both of these come up a lot, so I'm confident we can get them sorted!

一、跨文件未定义问题 #

First up, that cross-file undefined error. Here are the most likely culprits and how to fix them:

• Double-check your import paths: It's easy to mess up relative paths (like writing ../components/MyComponent instead of ../../components/MyComponent) or forget that absolute paths need proper alias setup in your Metro config.
• Match export/import styles: If you used export default MyComponent in the source file, import it without curly braces (import MyComponent from './MyComponent'). If you used named exports (export const MyComponent), you need curly braces (import { MyComponent } from './MyComponent').
• Verify file extensions: In some React Native setups (especially with TypeScript or custom Metro configs), you might need to include .js/.jsx extensions in your imports—try adding them if you haven't already.
• Reset your cache: Old cache can cause modules to not be recognized. Run npx react-native start --reset-cache and restart your app.

二、相机权限报错问题 #

I noticed you edited the Info.plist inside node_modules—that's the problem! Files in node_modules don't get bundled into your app, so those changes never take effect. You need to modify your project's own permission files:

For iOS #

1. Open your project's ios/[YourProjectName]/Info.plist (this is the one that actually gets included in your app bundle).
2. Add these permission keys inside the <dict> tag:

<key>NSCameraUsageDescription</key>
<string>Feetit Would you like to access Camera</string>
<key>NSPhotoLibraryUsageDescription</key>
<string>Feetit Would you like to access your photo library</string>

3. Rebuild your app: Either run npx react-native run-ios or go to Xcode, do a Clean Build Folder (Shift+Cmd+K) and then run the app again.

For Android #

1. Open android/app/src/main/AndroidManifest.xml.
2. Add these permissions inside the <manifest> tag (before the <application> tag):

<uses-permission android:name="android.permission.CAMERA" />
<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />
<!-- For Android 13+, add this instead of READ_EXTERNAL_STORAGE -->
<uses-permission android:name="android.permission.READ_MEDIA_IMAGES" />

3. Don't forget to request permissions dynamically in your code—Android requires this for dangerous permissions like camera:

import { PermissionsAndroid } from 'react-native';

const requestCameraPermissions = async () => {
  try {
    const granted = await PermissionsAndroid.request(
      PermissionsAndroid.PERMISSIONS.CAMERA,
      {
        title: "Feetit Camera Access",
        message: "Feetit needs access to your camera to capture content",
        buttonPositive: "Allow",
        buttonNegative: "Cancel",
      }
    );
    return granted === PermissionsAndroid.RESULTS.GRANTED;
  } catch (error) {
    console.error('Permission request error:', error);
    return false;
  }
};

Quick Note on Lottie Configuration #

Since you mentioned a Lottie-related scenario, make sure your Lottie setup is correct:

• Ensure you've installed both lottie-react-native and lottie-ios (run npm install lottie-react-native lottie-ios if you haven't).
• For iOS, run cd ios && pod install && cd .. to link the pod properly.
• Check that your Lottie version is compatible with your React Native version—for RN 0.70+, you'll need lottie-react-native v5.0.0 or higher.

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