react-native - React.createElement:类型无效,应为字符串
问题描述
我是 react native 的新手,我尝试制作餐厅应用程序,但在浏览器控制台中出现以下错误:
React.createElement: type is invalid - 需要一个字符串(对于内置组件)或一个类/函数(对于复合组件)但是得到:%s.%s%s,未定义,您可能忘记从定义它的文件,或者您可能混淆了默认和命名导入。
所以我错过了什么?它告诉我错误在渲染方法中,但我无法弄清楚
应用程序.js:
import React from 'react';
import { StyleSheet, Text, FlatList, ActivityIndicator, View, Image } from 'react-native';
import { List, ListItem, SearchBar, Avatar } from "react-native-elements";
import { StackNavigator,createAppContainer } from 'react-navigation';
import { createStackNavigator} from 'react-navigation-stack';
import { constants } from 'expo';
import HomeScreen from './src/home';
import DetailScreen from './src/detail';
const AppNavigator = createStackNavigator({
Home: { screen: HomeScreen,
navigationOptions: {
title: 'Home',
headerBackTitle: 'Back',
},
},
Detail: { screen: DetailScreen,
navigationOptions: {
title: 'Detail',
},
}
});
export default createAppContainer(AppNavigator);
主页.js:
import React from 'react';
import { StyleSheet, Text, FlatList, ActivityIndicator, View, Image } from 'react-native';
import { List, ListItem, SearchBar, Avatar } from "react-native-elements";
import { StackNavigator } from 'react-navigation';
export default class HomeScreen extends React.Component {
constructor(props) {
super(props);
this.state = {
loading: false,
data: [],
error: null,
refreshing: false,
base_url: "http://localhost:8000/api"
}
}
componentDidMount() {
this.fetchDataFromApi();
}
fetchDataFromApi = () => {
const url = "http://localhost:8000/api.json";
this.setState({ loading: true });
fetch(url)
.then(res => res.json())
.then(res => {
this.setState({
data: res,
error: null,
loading: false,
refreshing: false
});
})
.catch(error => {
this.setState({ error, loading : false });
})
};
handleRefresh = () => {
this.setState(
{
refreshing: true
},
() => {
this.fetchDataFromApi();
}
);
};
renderSeparator = () => {
return (
<View
style={{
height: 1,
width: "86%",
backgroundColor: "#CED0CE",
marginLeft: "14%",
marginTop: "3%"
}}
/>
);
};
renderHeader = () => {
return <SearchBar placeholder="Type Here..." lightTheme round />;
};
render() {
return (
<List containerStyle={{ borderTopWidth: 0, borderBottomWidth: 0 }}>
<FlatList
data={this.state.data}
renderItem={({ item }) => (
<ListItem
onPress={() => this.props.navigation.navigate('Detail',
{name: `${item.name}`, menu: `${item.menu}`,
img: `${this.state.base_url}${item.photo}`,
address: `${item.address}`})}
avatar={<Avatar
source={{uri: `${this.state.base_url}${item.photo}`}}
onPress={() => console.log("Works!")}
containerStyle={{marginBottom: 2}}
avatarStyle={{resizeMode: "cover"}}
width={140}
height={130}
/>}
title={`${item.name}`}
titleStyle={{ fontSize: 16}}
titleContainerStyle = {{ marginLeft: 120 }}
subtitle={<View style={styles.subtitleView}>
<Text style={styles.menuText}>{item.menu}</Text>
<Text style={styles.locText}>{item.address}</Text>
</View>}
containerStyle={{ borderBottomWidth: 0, marginBottom: 20 }}
/>
)}
keyExtractor={item => item.id}
ItemSeparatorComponent={this.renderSeparator}
ListHeaderComponent={this.renderHeader}
onRefresh={this.handleRefresh}
refreshing={this.state.refreshing}
/>
</List>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
subtitleView: {
flexDirection: 'column',
paddingLeft: 10,
paddingTop: 5,
marginLeft: 110
},
menuText: {
paddingLeft: 10,
color: 'grey'
},
locText: {
paddingLeft: 10,
color: 'grey',
marginTop: 6,
fontSize: 12
},
titleText: {
fontWeight: 'bold'
},
restaurantImage: {
width: 600,
height: 800
}
});
包.json:
{
"main": "node_modules/expo/AppEntry.js",
"scripts": {
"start": "expo start",
"android": "expo start --android",
"ios": "expo start --ios",
"web": "expo start --web",
"eject": "expo eject"
},
"dependencies": {
"expo": "~37.0.3",
"react": "~16.9.0",
"react-dom": "~16.9.0",
"react-native": "https://github.com/expo/react-native/archive/sdk-37.0.1.tar.gz",
"react-native-elements": "^2.0.1",
"react-native-gesture-handler": "~1.6.0",
"react-native-web": "~0.11.7",
"react-navigation": "^4.3.9",
"react-navigation-stack": "^2.5.1",
"react-native-reanimated": "~1.7.0",
"react-native-screens": "~2.2.0",
"react-native-safe-area-context": "0.7.3",
"@react-native-community/masked-view": "0.1.6"
},
"devDependencies": {
"babel-preset-expo": "~8.1.0",
"@babel/core": "^7.8.6"
},
"private": true
}
解决方案
你做错了什么是你错误地导入了 stackNavigator
改变
import { StackNavigator } from 'react-navigation';
至
import { createStackNavigator} from 'react-navigation';
希望这可以帮助!
推荐阅读
- javascript - axios 无法发送凭据
- javascript - csv-parse 模块 (npm) 引用的回调函数中更新的全局变量未更新
- python - 无法将大型 csv 文件从 s3 存储桶读取到 python
- python - 如何卷积两个 fft 的 wav 文件
- excel - 使用变量引用工作簿
- java - 如何在不将数据加载到应用程序内存中的情况下执行 SQL 查询并将结果放入结果表中?
- node.js - Google Home 如何组织“多功能”设备?
- c++ - 为什么不将路径除以默认构造路径只需在 Visual Studio 中添加尾随分隔符?
- node.js - 在全局(单例)服务中使用特定于请求的上下文
- android - Android VideoView 控件未显示