推荐开源项目:V2EX React Native 应用
以下是一个简化的代码实例,展示了如何创建一个用于展示帖子列表的组件:
import React from 'react';
import { View, FlatList, ActivityIndicator, Text } from 'react-native';
import { ListItem } from 'react-native-elements';
export default class PostsList extends React.Component {
render() {
const { posts, loading, error } = this.props;
if (loading) {
return <ActivityIndicator size="large" color="#0000ff" />;
}
if (error) {
return <Text>Error: {error}</Text>;
}
return (
<FlatList
data={posts}
keyExtractor={(item) => item.id}
renderItem={({ item }) => (
<ListItem
title={item.title}
subtitle={item.url}
/>
)}
/>
);
}
}
这个代码实例展示了如何在React Native应用中使用FlatList
组件来渲染帖子列表,并处理加载状态和错误。它使用了react-native-elements
库中的ListItem
组件来显示每个帖子的标题和URL。
评论已关闭