javascript - React Native 错误:元素类型无效:应为字符串或类/函数,但得到:未定义。但是哪里?
问题描述
在我的代码中放置叠加层时,我是第一个遇到此错误的人
const HomeScreen = ({ navigation }) => {
const [modal, setModal] = useState(true);
return (
<View>
<Button
buttonStyle="moreBtn"
title="aaa"
onPress={() =>
navigation.navigate('Profile', { name: 'Jane' })
}
/>
<Overlay>
<Text>Hello from verlay!</Text>
</Overlay>
<Modal
animationType="slide"
transparent={true}
visible={modal}
style={styles.modal}
onPress={() => {
setModal(false)
}}
>
<View style={{height:500}}>
<Text>aaaaa</Text>
<Button onPress={() => {
setModal(false)
}}>Bouton</Button>
</View>
</Modal>
</View>
);
};
当我将覆盖组件 JSX 放在我的渲染函数中时,我有这个错误:
Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.
为什么 ?
我编辑了我的帖子以在文件顶部添加我的以下导入。
import { StatusBar } from 'expo-status-bar';
import React, { useState } from 'react';
import { TouchableOpacity, StyleSheet, Text, View, Button, FlatList, ScrollView, Modal } from 'react-native';
import Overlay from 'react-native';
import 'react-native-gesture-handler';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
“HomeScreen”位于“App”BottomTabNavigator 元素内
export default App;
解决方案
您错误地导入了 Overlay react-native 没有 Overlay 组件,您可以使用 Overlay fromreact-native-elements
改变
import Overlay from 'react-native';
至
import { Overlay } from 'react-native-elements';
检查这个:https ://react-native-elements.github.io/react-native-elements/docs/overlay.html
推荐阅读
- excel - 如何根据上一年的值在 Excel 中使用 MDX 使用加权分配?(在 SSAS 中写回)
- html - 如何删除引导程序 4 按钮单击效果
- android - 无法解决:support-compat ONLY FOR :27.1.1
- python-3.x - 有没有办法将 django 应用程序部署到 Godaddy 主机?
- python - 如果数据有噪声,如何有效衡量神经网络的性能
- c# - NuGet 找不到已安装的软件包:但允许我使用未安装的软件包
- powerbi - Power BI:DAX 公式 - 在组 ID 上构建总和
- ansible - 我的主机和相应的主机变量作为 JSON 输入给出。如何在 Playbook 中使用它们
- symfony-3.4 - 注释 "@Doctrine\ORM\Mapping\column":$status 不存在,或无法自动加载
- google-maps - 如何创建 ExtJS 谷歌地图?