我正在用React Native编写一个应用程序,用于检查电话号码是否有效。为此,我尝试将自己的npm库导入应用程序并使用它。
我的图书馆链接:https://www.npmjs.com/package/mobile-number-validator
逻辑很简单:屏幕上有一个输入数字的区域。输入数字后,按验证按钮,它会告诉你数字是否有效。在执行此操作时,它使用npm库。(库工作正常。已测试。)
我导入了我的npm库;npm install mobile-number-validator
Interface of app
当你测试应用程序时;输入数字并检查验证,它给出“TypeError:undefined不是一个函数,js引擎:爱马仕”错误。
error
我扫描了所有的互联网和聊天,但没有任何想法来解决它。
下面是我的源代码:
import React, { useState } from 'react';
import { View, Text, TextInput, Button, StyleSheet } from 'react-native';
import { isValidPhoneNumber } from 'mobile-number-validator';
const App = () => {
const [phoneNumber, setPhoneNumber] = useState('');
const [isValid, setIsValid] = useState(false);
const handleValidation = () => {
const isValidNumber = isValidPhoneNumber(phoneNumber);
setIsValid(isValidNumber);
};
return (
<View style={styles.container}>
<View style={styles.inputContainer}>
<TextInput
style={styles.input}
placeholder="Enter phone number"
onChangeText={text => setPhoneNumber(text)}
value={phoneNumber}
/>
</View>
<Button title="Validate" onPress={handleValidation} />
{isValid ? (
<Text style={{ color: 'green' }}>Valid phone number</Text>
) : (
<Text style={{ color: 'red' }}>Invalid phone number</Text>
)}
</View>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
justifyContent: 'center',
},
inputContainer: {
width: '80%',
marginBottom: 20,
},
input: {
borderWidth: 1,
borderColor: '#ccc',
padding: 10,
borderRadius: 5,
},
});
export default App;
如果需要,这里是我的json文件:
{
"expo": {
"name": "mobile-number-validator",
"slug": "mobile-number-validator",
"version": "1.0.0",
"orientation": "portrait",
"icon": "./assets/icon.png",
"userInterfaceStyle": "light",
"splash": {
"image": "./assets/splash.png",
"resizeMode": "contain",
"backgroundColor": "#ffffff"
},
"assetBundlePatterns": [
"**/*"
],
"ios": {
"supportsTablet": true
},
"android": {
"adaptiveIcon": {
"foregroundImage": "./assets/adaptive-icon.png",
"backgroundColor": "#ffffff"
}
},
"web": {
"favicon": "./assets/favicon.png"
}
}
}
当我进入这篇文章时,我意识到了一些不同的东西。在导入部分,它说:“找不到模块'mobile-number-validator'的声明文件”
Could not find a declaration file for module 'mobile-number-validator'
什么原因不能工作?你的想法是什么?
我已经检查了这个stackoverflow问题:ERROR TypeError: undefined is not a function, js engine: hermes但也没有什么。
我问了ChatGPT,它返回了这个答案:* 错误消息“TypeError:undefined is not a function”表示JavaScript引擎无法识别isValidPhoneNumber函数。如果包安装或代码中的import语句存在问题,则可能会发生这种情况。
以下是您可以尝试解决此问题的一些步骤:
通过在项目目录中运行npm ls mobile-number-validator命令,检查是否正确安装了“mobile-number-validator”包。此命令将显示已安装的包版本。如果未安装,请再次尝试运行npm install mobile-number-validator。
确保正确导入isValidPhoneNumber函数。在我之前提供的代码示例中,import语句应该如下所示:import { isValidPhoneNumber } from 'mobile-number-validator';。请仔细检查import语句是否与此格式匹配,以及函数名是否拼写错误。
如果问题仍然存在,请尝试删除node_modules文件夹并使用npm install命令重新安装所有依赖项。
如果上述步骤都不能解决问题,请尝试使用不同的JavaScript引擎,如V8而不是爱马仕。您可以通过在项目目录中运行命令npx react-native config set jsEngine v8切换到V8。
我希望这些步骤可以帮助您解决“mobile-number-validator”软件包的问题。如果您有任何进一步的问题或问题,请告诉我。*
1条答案
按热度按时间ozxc1zmp1#
我检查了你的库代码,你使用“module.export”导出你的isValidPhoneNumber,但在React Native中,你使用“import { isValidPhoneNumber } from 'mobile-number-validator';“。这是一个错误的语法。
导入/导出语法是ES6模块系统的一部分,而module.exports是Node.js使用的CommonJS模块系统的一个特性。
如果你想使用CommonJS模块系统,你应该使用“required”关键字来导入isValidPhoneNumber(不推荐用于React Native代码)
建议使用ES6,您需要更改库代码中导出“isValidPhoneNumber”的方式
在App.js中,您可以使用当前代码导入