React Native项目OtpVerification页面styles模块解析失败求助

错误详情 #

运行OtpVerification页面时出现模块解析错误，具体提示如下：

error: Error: Unable to resolve module ./styles from C:\Users\user\Desktop\project\project\src\Screens\OtpVerification\OtpVerifications.js:

None of these files exist:
  * src\Screens\OtpVerification\styles(.native|.android.js|.native.js|.js|.android.json|.native.json|.json|.android.ts|.native.ts|.ts|.android.tsx|.native.tsx|.tsx)
  * src\Screens\OtpVerification\styles\index(.native|.android.js|.native.js|.js|.android.json|.native.json|.json|.android.ts|.native.ts|.ts|.android.tsx|.native.tsx|.tsx)
   8 | import strings from '../../constatns/lang';
   9 | import navigationStrings from '../../constatns/navigationStrings';
> 10 | import { moderateScale,  } from '../../styles/responsiveSize';
     |                                      ^
  11 | import styles from './styles';
  12 | import OtpInputs from 'react-native-otp-inputs';
  13 | import actions from '../../reudx/actions';

当前页面导入代码：

//import liraries
import React, { Component } from 'react';
import { View, Text, StyleSheet, TouchableOpacity, Image } from 'react-native';
import HeaderComponent from '../../Components/HeaderComponent';
import HorizontalLine from '../../Components/HorizontalLine';
import WrapperContainer from '../../Components/WrapperContainer';
import imagePath from '../../constatns/imagePath';
import strings from '../../constatns/lang';
import navigationStrings from '../../constatns/navigationStrings';
import { moderateScale, moderateScaleVertical } from '../../styles/responsiveSize';
import styles from './styles';
import OtpInputs from 'react-native-otp-inputs';
import actions from '../../reudx/actions';

自适应工具文件responsiveSize.js代码：

import { Dimensions, StatusBar } from 'react-native';
const { width, height } = Dimensions.get('window');

const guidelineBaseWidth = 375;
const guidelineBaseHeight = 812;

const scale = size => (width / guidelineBaseWidth) * size;
const verticalScale = size => (height / guidelineBaseHeight) * size;
const moderateScale = (size, factor = 0.5) => size + (scale(size) - size) * factor;
const moderateScaleVertical = (size, factor = 0.5) => size + (verticalScale(size) - size) * factor;
const textScale = percent => {
    const screenHeight = Dimensions.get('window').height;
    //calculate absolute ratio for bigger screens 18.5:9 requiring smaller scaling
    const ratio = Dimensions.get('window').height / Dimensions.get('window').width;
    //Guideline sizes are based on standard ~5″ screen mobile device
    const deviceHeight = 375
        ? screenHeight * (ratio > 1.8 ? 0.126 : 0.15) //Set guideline depending on absolute ratio
        : Platform.OS === 'android'
            ? screenHeight - StatusBar.currentHeight
            : screenHeight;

    const heightPercent = (percent * deviceHeight) / 100;
    return Math.round(heightPercent);
};

export { scale, verticalScale, textScale, moderateScale, moderateScaleVertical,width,height };

排查与解决步骤 #

• 确认样式文件存在：检查src/Screens/OtpVerification目录下是否有styles.js（或对应后缀的样式文件，如styles.tsx），注意文件名大小写和路径是否正确，排除误删或移动文件的可能。
• 修复导入语法错误：错误提示指向的第10行存在多余逗号，修正为：

  import { moderateScale, moderateScaleVertical } from '../../styles/responsiveSize';
  

• 清理Metro缓存：执行命令清除缓存，避免缓存导致的解析异常：

  npx react-native start --reset-cache
  # 使用Expo则执行：npx expo start -c
  

• 重启开发服务器：完全关闭当前开发服务器后重新启动，排除进程异常问题。
• 验证路径正确性：确认../../styles/responsiveSize对应的src/styles/responsiveSize.js文件存在且命名正确。

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