执行时向我发送以下错误，你知道我做错了什么吗？我使用了发布的代码
不变冲突：元素类型无效：应为内置组件)或类/函数(用于复合组件)但是得到了：未定义。您可能忘记从导出组件它在中定义的文件，或者您可能混淆了默认和命名进口。
检查FlatListDemo的渲染方法。
此错误位于：中的FlatListDemo(位于withExpoRoot.js:22)ExpoRootComponent(位于renderApplication.js:34)在RCTView(位于View.js:44)中View.js:44)(位于renderApplication.js:33)
node_modules\react native\Libraries\Renderer\oss\react nativeRenderer-dev.js:5630:10在createFiberFromElement中node_modules\react native\Libraries\Renderer\oss\react nativeRenderer-dev.js:9710:8正在对账SingleElement。。。框架中又有21个堆栈帧内部
import React, { Component } from "react";
import { View, Text, FlatList, ActivityIndicator } from "react-native";
import { List, ListItem, SearchBar } from "react-native-elements";
class FlatListDemo extends Component {
constructor(props) {
super(props);
this.state = {
loading: false,
data: [],
page: 1,
seed: 1,
error: null,
refreshing: false
};
}
componentDidMount() {
this.makeRemoteRequest();
}
makeRemoteRequest = () => {
const { page, seed } = this.state;
const url = `https://randomuser.me/api/?seed=${seed}&page=${page}&results=20`;
this.setState({ loading: true });
fetch(url)
.then(res => res.json())
.then(res => {
this.setState({
data: page === 1 ? res.results : [...this.state.data, ...res.results],
error: res.error || null,
loading: false,
refreshing: false
});
})
.catch(error => {
this.setState({ error, loading: false });
});
};
handleRefresh = () => {
this.setState(
{
page: 1,
seed: this.state.seed + 1,
refreshing: true
},
() => {
this.makeRemoteRequest();
}
);
};
handleLoadMore = () => {
this.setState(
{
page: this.state.page + 1
},
() => {
this.makeRemoteRequest();
}
);
};
renderSeparator = () => {
return (
<View
style={{
height: 1,
width: "86%",
backgroundColor: "#CED0CE",
marginLeft: "14%"
}}
/>
);
};
renderHeader = () => {
return <SearchBar placeholder="Type Here..." lightTheme round />;
};
renderFooter = () => {
if (!this.state.loading) return null;
return (
<View
style={{
paddingVertical: 20,
borderTopWidth: 1,
borderColor: "#CED0CE"
}}
>
<ActivityIndicator animating size="large" />
</View>
);
};
render() {
return (
<List containerStyle={{ borderTopWidth: 0, borderBottomWidth: 0 }}>
<FlatList
data={this.state.data}
renderItem={({ item }) => (
<ListItem
roundAvatar
title={`${item.name.first} ${item.name.last}`}
subtitle={item.email}
avatar={{ uri: item.picture.thumbnail }}
containerStyle={{ borderBottomWidth: 0 }}
/>
)}
keyExtractor={item => item.email}
ItemSeparatorComponent={this.renderSeparator}
ListHeaderComponent={this.renderHeader}
ListFooterComponent={this.renderFooter}
onRefresh={this.handleRefresh}
refreshing={this.state.refreshing}
onEndReached={this.handleLoadMore}
onEndReachedThreshold={50}
/>
</List>
);
}
}
export default FlatListDemo;
看起来您正在学习本教程中的介质https://medium.freecodecamp.org/how-to-build-a-react-native-flatlist-with-realtime-searching-ability-81ad100f6699
不幸的是，本教程是在react-native-elements升级到v1.0.0之前编写的。升级react-native-elements时，删除了几个组件，并更改了其他组件。关于他们的完整列表，你应该在他们的网站上看到这篇博客文章。这太长了，无法在这里复制，但我将重复与您的具体情况相关的部分。
列表
这已经被删除，这可能是导致您在尝试导入不存在的东西时看到的大错误的原因。
https://react-native-training.github.io/react-native-elements/blog/2019/01/27/1.0-release.html#list
List组件已删除List只是一个常规的React Native使用一些小边距样式查看。实际上不需要使用CCD_ 6分量。相反，我们建议使用FlatList或React Native的SectionList组件，同时用作视图以及显示项目、拖动以刷新等等。
ListItem
roundAvatar和avatar已经被丢弃并且不再使用。
https://react-native-training.github.io/react-native-elements/blog/2019/01/27/1.0-release.html#listitem
avatar、avatarStyle、avatarContainerStyle、roundAvatar和avatarOverlayContainerStyle已移除。化身现在可以自定义使用CCD_ 16和CCD_ 17道具自定义元素或描述《阿凡达》道具的对象。
解决方案
你有两个选择。
- 降级为
v0.19.1 - 为
v1.0.0重新生成代码
降级
最简单的方法(尽管这可能不起作用，因为新版本的react native可能存在兼容性问题)是降级您的react-native-elements版本。
您可以通过运行npm uninstall react-native-elements来做到这一点
然后重新安装特定版本的npm install react-native-elements@0.19.1
您可以在此处查看v0.19.1组件的完整列表https://react-native-training.github.io/react-native-elements/docs/0.19.1/overview.html
Refactor
另一种选择，可能也是更好的选择，尽管可以说这需要更多的工作，是重构代码，使其使用v1.0.0中的新组件。您可以在此处查看v1.0.0组件的完整列表https://react-native-training.github.io/react-native-elements/docs/overview.html
正如Andres所说，react原生元素的属性发生了变化，因此我将发布在我的案例中有效的代码。
import React, { Component } from "react";
import { View, Platform, Image, Text, FlatList, ActivityIndicator } from "react-native";
import { ListItem, List } from "react-native-elements";
class FlatListDemo extends Component {
constructor(props) {
super(props);
this.state = {
loading: false,
data: []
}
}
componentDidMount() {
this.makeRemoteRequest();
}
makeRemoteRequest = () => {
const url = 'https://randomuser.me/api/?seed=1&page=1&results=20';
this.setState({ loading: true });
fetch(url)
.then(res => res.json())
.then(res => {
this.setState({
data: res.results,
loading: false,
});
});
};
render() {
return (
<View>
<FlatList
data={this.state.data}
renderItem={({ item }) => (
<ListItem
title={
<View >
<Image style={{height:50}} source={require('./src/img/recarga.jpg')}>
</Image>
<Text>{item.name}</Text>
</View>
}
subtitle={item.email}
/>
)}
keyExtractor={item=>item.email}
/>
</View>
);
}
}
export default FlatListDemo;