英文:
React "view config getter callback component 'path' must be function (received 'undefined')"
问题
我无法在我的React应用程序中使用React图标。我可以很好地导入FontAwesome图标，但每当我尝试使用该图标时，我的应用程序就会崩溃。我尝试过从Stack Overflow和其他网站上找到的许多答案，但都没有帮助。有人可以帮我吗？以下是我的App.js：
import { StatusBar } from 'expo-status-bar';
import { StyleSheet, Text, View } from 'react-native';
import { FaArrowLeft } from "@react-icons/all-files/fa/FaArrowLeft";
export default function App() {
return (
<View style={styles.container}>
<Text>
主页 <FaArrowLeft />
</Text>
<StatusBar style="auto" />
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: 'skyblue',
alignItems: 'center',
justifyContent: 'center',
},
});
在移动应用程序上显示的错误是：视图配置获取器回调组件 'path' 必须是一个函数（接收到 'undefined'）
在VS Code上显示的错误的前几行是：
错误：无法解析模块./Libraries/Components/DatePicker/DatePickerIOS来自/Users/Dakota/Mobile/Recifeed/node_modules/react-native/index.js：
没有这些文件：
* node_modules/react-native/Libraries/Components/DatePicker/DatePickerIOS(.native|.native.ts|.ts|.native.tsx|.tsx|.native.js|.js|.native.jsx|.jsx|.native.json|.json)
* node_modules/react-native/Libraries/Components/DatePicker/DatePickerIOS/index(.native|.native.ts|.ts|.native.tsx|.tsx|.native.js|.js|.native.jsx|.jsx|.native.json|.json)
15 | import typeof ActivityIndicator from './Libraries/Components/ActivityIndicator/ActivityIndicator';
16 | import typeof Button from './Libraries/Components/Button';
17 | import typeof DatePickerIOS from './Libraries/Components/DatePicker/DatePickerIOS';
| ^
最常见的解决方法是运行 npm start --clean-cache，但对我不起作用。
英文:
I can't get a react icon inside my react app. I can import the font awesome icon just fine, but whenever I try using the icon, my app crashes. I've tried dozens of answers from stack overflow and other websites and none of those have helped. Can some help me with this? Here's my App.js
import { StyleSheet, Text, View } from 'react-native';
import { FaArrowLeft } from "@react-icons/all-files/fa/FaArrowLeft";
export default function App() {
return (
<View style={styles.container}>
<Text>
Main <FaArrowLeft />
</Text>
<StatusBar style="auto" />
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: 'skyblue',
alignItems: 'center',
justifyContent: 'center',
},
});
The error that shows up on the mobile app is:
view config getter callback component 'path' must be function (received 'undefined')
And the first couple lines of the error that shows up on vs code is:
Error: Unable to resolve module ./Libraries/Components/DatePicker/DatePickerIOS from /Users/Dakota/Mobile/Recifeed/node_modules/react-native/index.js:
None of these files exist:
* node_modules/react-native/Libraries/Components/DatePicker/DatePickerIOS(.native|.native.ts|.ts|.native.tsx|.tsx|.native.js|.js|.native.jsx|.jsx|.native.json|.json)
* node_modules/react-native/Libraries/Components/DatePicker/DatePickerIOS/index(.native|.native.ts|.ts|.native.tsx|.tsx|.native.js|.js|.native.jsx|.jsx|.native.json|.json)
15 | import typeof ActivityIndicator from './Libraries/Components/ActivityIndicator/ActivityIndicator';
16 | import typeof Button from './Libraries/Components/Button';
> 17 | import typeof DatePickerIOS from './Libraries/Components/DatePicker/DatePickerIOS';
| ^
18 | import typeof DrawerLayoutAndroid from './Libraries/Components/DrawerAndroid/DrawerLayoutAndroid';
19 | import typeof FlatList from './Libraries/Lists/FlatList';
20 | import typeof Image from './Libraries/Image/Image';
at ModuleResolver.resolveDependency (/Users/Dakota/Mobile/Recifeed/node_modules/metro/src/node-haste/DependencyGraph/ModuleResolution.js:136:15)
at DependencyGraph.resolveDependency (/Users/Dakota/Mobile/Recifeed/node_modules/metro/src/node-haste/DependencyGraph.js:231:43)
at Object.resolve (/Users/Dakota/Mobile/Recifeed/node_modules/metro/src/lib/transformHelpers.js:129:24)
at resolve (/Users/Dakota/Mobile/Recifeed/node_modules/metro/src/DeltaBundler/traverseDependencies.js:396:33)
at /Users/Dakota/Mobile/Recifeed/node_modules/metro/src/DeltaBundler/traverseDependencies.js:412:26
at Array.reduce (<anonymous>)
The most common resolution is running 'npm start --clean-cache' but that doesn't work for me
答案1
得分: 0
您不能在React Native中使用@react-icons/all-files或react-icons。它们渲染Web原生的<svg>标签，在RN中不起作用。如果您想要在RN中使用图标，您可以考虑以下选项：
react-native-vector-icons（适用于裸机React Native项目）@expo/vector-icons（适用于Expo托管应用程序）
这些选项与Web React的版本（react-icons）不同，并为每个平台渲染本机组件，而不是<svg>。
英文:
You cannot use @react-icons/all-files nor react-icons in React Native. They render web-native <svg> tags which won't work in RN. If you want icons in RN they you might consider looking into either
react-native-vector-icons(If you have a bare React Native project)@expo/vector-icons(For an expo managed application)
These are different from the web React's version (react-icons) & render native components for each platform instead of an <svg>.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论