我收到此错误,我在修复此问题时遇到了很多麻烦。
我在这里尝试做的是有3个不同的屏幕,并有一个导航到每个屏幕的标签栏。
这是我的索引:
import React, { Component } from 'react';
import { AppRegistry, Navigator, StyleSheet, View, Text } from 'react-native';
import Nav from './app/components/Nav';
import Screen from './app/Screen';
import Tabs from 'react-native-tabs'
import SwitchView from './SwitchView';
class Proj extends Component {
constructor(props){
super(props);
}
render(){
var x = "FeedView";
return(
<View style={styles.container}>
<Tabs selected={x} style={{backgroundColor:'white'}}
selectedStyle={{color:'red'}} onSelect={el=> {x = el.props.name}}>
<Text name="FeedView">First</Text>
<Text name="WikiView" selectedIconStyle={{borderTopWidth:2,borderTopColor:'red'}}>Second</Text>
<Text name="BoardView">Third</Text>
</Tabs>
<SwitchView id={x}/>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
welcome: {
fontSize: 20,
textAlign: 'center',
margin: 10,
},
instructions: {
textAlign: 'center',
color: '#333333',
marginBottom: 5,
},
})
AppRegistry.registerComponent('Proj', () => Proj);
这是我的SwitchView:
import Feed from './app/pages/Feed/Feed';
import Board from './app/pages/Board';
import Wiki from './app/pages/Wiki';
class SwitchView extends Component {
render(){
var { id } = this.props;
switch (id) {
case "FeedView":
return <Feed/>
case "WikiView":
return <Wiki/>
case "BoardView":
return <Board/>
}
}
}
答案 0 :(得分:42)
这可能是由程序中的某些JS模块导出/导入问题引起的,通常是出于以下两个原因之一:
我遇到了类似的错误,但在我的情况下,它不是由AnswerIntent
引起的,而是由Chevrolet
引起的,并且我错误地使用了export
语句来导入没有&#的内容39; t存在于模块中。
在我的情况下,import
被错误地写为:
import
import
它让我发疯了,花了我一整天的时间才想出来,我希望这会为一些人节省几个小时。
答案 1 :(得分:24)
将SwitchView定义更改为
export default class SwitchView extends Component...
答案 2 :(得分:7)
将SwitchView修改为:
import Feed from './app/pages/Feed/Feed';
import Board from './app/pages/Board';
import Wiki from './app/pages/Wiki';
export default class SwitchView extends Component {
render(){
var { id } = this.props;
switch (id) {
case "FeedView":
return <Feed/>
case "WikiView":
return <Wiki/>
case "BoardView":
return <Board/>
}
}
}
答案 3 :(得分:3)
在我的花瓶中,我使用本地反应0.46.4
并且有类似import MainContainer from './app'
的内容,其中app
目录在Android和iOS中有共享的index.js
文件,但是React Native未在index.js
内检测到app
。一旦我切换到import MainContainer from './app/index.js'
,它就有效了。
答案 4 :(得分:2)
我只针对安装的软件包遇到此问题。 以前我写的是
import WebView from 'react-native-webview-messaging/WebView';
我改为
import { WebView } from 'react-native-webview-messaging/WebView';
答案 5 :(得分:1)
在我的情况下,通过检查 react-navigation 和 react-navigation/drawer 的版本来修复错误
我使用的是 @react-navigation 版本 5 并拥有 @react-navigation/drawer 版本 6,这导致了问题。
我删除了版本 6 然后安装了@react-navigation/drawer version 5,问题就解决了
答案 6 :(得分:0)
与module.exports = SwitchView有何不同?
对我来说,module.exports适用于我的所有js文件,除了一个。
答案 7 :(得分:0)
这可能是由程序中的某些JS模块导出/导入问题引起的,通常是出于以下两个原因之一:
我遇到了类似的错误,但就我而言,这不是由导出引起的,而是由导入引起的。我错误地使用了import语句来导入模块中不存在的内容。
答案 8 :(得分:0)
当您尝试访问未导出的组件时出现此错误。就我而言,我忘记了导出组件,而正在访问它。
答案 9 :(得分:0)
可以使用Defualt解决此错误
代替导出,使用导出默认值
答案 10 :(得分:0)
就我而言,问题在于“AppLoading”的 npm 安装不正确。 使用 react-navigation 时出现错误“组件异常:元素类型无效”。 此错误下方有一条建议语句,用于检查“App”的渲染方法。 我没有正确安装“AppLoading”。然后我将其安装为:
expo install expo-app-loading
然后将应用加载导入更改为
import AppLoading from "expo-app-loading";
[注意:确保您的 <AppLoading />
应包含 onError 属性]。
通过这些简单的更改,我的应用开始按预期运行。
答案 11 :(得分:0)
我在写作时遇到了这个问题:
import {ErrorMessage} from '../Components/ErrorMessage';
而不是这样写:
import ErrorMessage from '../Components/ErrorMessage';