如果item.id与json中的id相同,我如何只在FlatList中呈现项目?
我是本机和JavaScript的新手,所以也许这是一个愚蠢的问题。
export default class DetailsScreen extends Component {
constructor(props) {
super(props);
this.state = {
isLoading: true,
dataSource: [],
};
}
componentDidMount() {
this.setState({
isLoading: false,
dataSource: data.data
});
}
render() {
if (this.state.isLoading) {
return (
<View>
<ActivityIndicator />
</View>
);
}
return (
<View>
<FlatList
data={this.state.dataSource}
renderItem={({ item }) => (this.renderDetailView(item))}
keyExtractor={(item, index) => index.toString()}
/>
</View>
);
}
}
这是Flatlist的简单呈现,并且效果很好。 “ renderDetailView”非常复杂且冗长,因此我无法添加代码。
但它看起来像这样:
renderDetailView(item) {
return (
<View style={styles.info} key={item.id}>
<View>
<Text style={styles.detailView}>
{item.name}
</Text>
<Text>{'\n'}</Text>
</View>
...
</View>
);
}
在最后一个项目中,我要处理对另一个FlatList的单击,并显示单击项的详细信息。单击的项目将ID“发送”到此类,因此我得到了特定的detailView。
对不起,我的英语不好。
答案 0 :(得分:1)
如果您想在点击列表项时导航到详细信息页面,则应使用导航库(react-navigation是最受欢迎的)。
我创建了一个基本的工作示例: https://snack.expo.io/@sanjar/so-53747271
(在本示例中,我使用的是react-navigation 2,而最后一个版本是react-navigation 3,因此如果要在本地复制它,也要使用它)
ps:我不确定您是否完全了解您的要求,如果我的回答与主题无关或有任何疑问,您可以添加评论