在 FlatList React Native 中仅显示 10 条记录
Posted
技术标签:
【中文标题】在 FlatList React Native 中仅显示 10 条记录【英文标题】：Show only 10 records in FaltList React Native 【发布时间】：2020-03-07 20:19:25 【问题描述】：我在我的 expo 应用程序中从 API 获取数据到 FlatList，但问题是有超过 500 多条记录，但我只想在 FlatList 中显示 10 条记录，有什么办法吗？
export default class HomeScreen extends Component
constructor()
super()
this.state =
itemList: []
componentWillMount()
axios.get('myApiUri')
.then((response) =>
this.setState(
itemList: response.data
);
console.log("Data", response.data)
)
.catch(error => console.log("Errorrr:" + error))
// renderItem(data)
// return (
// );
//
render()
return (
<Container style= flex: 1, flexDirection: 'row' >
<FlatList
data=this.state.itemList
// columnWrapperStyle= justifyContent: "space-around", flex: 1
maxToRenderPerBatch=10
horizontal
renderItem=( item ) =>
return (
<View style= width: 150, paddingHorizontal: 3 >
<Card style= height: 200, padding:0 >
<CardItem>
<Body>
<Image source= uri: item.MainImg style= width: '100%', height: 150 />
item.ItemName.length > 10 ? <Text style=style.productTitle numberOfLines=1>item.ItemName.substring(0,18) + '...'</Text> : <Text numberOfLines=1 style=style.productTitleLess>item.ItemName</Text>
</Body>
</CardItem>
</Card>
</View>
);
keyExtractor=item => item.ID
/>
</Container>
);
【问题讨论】：
您可以在后端添加分页功能。 【参考方案1】：通过对数组进行切片：
<FlatList
data=this.state.itemList.slice(0, 10)
【讨论】：
【参考方案2】：当您有大量数据要显示在列表中时，尤其是当它大约 500+ 时，最好将其作为来自后端的分页响应进行维护；然后将最多 10 个值传递给 FlatList 组件。
在你的情况下，你可以在这里做的是，从前端对其进行分页。
你的构造函数会像，
constructor()
super()
this.state =
itemList: [],
pages: 0,
currentPage: 0
并且您的 componentWillMount axios 调用将有一个回调，例如，
(response) =>
const pages = response.data / 10;
this.setState(
itemList: response.data,
pages
);
现在你已经有了 state 中的数据，让我们将它渲染到 FlatList 组件中。在render()，
const itemList, currentPage = this.state;
const startingIndex = currentPage + 10;
const endingIndex = startingIndex + 10;
const data = itemList.slice(startingIndex, endingIndex);
并将数据传递给FlatList，如data=data。
您需要有一个分页按钮组件，并且您将拥有一个 onChange 功能，可以像这样维护它，
handlePageChange = (currentPage) =>
this.setState(
currentPage
)
附：在这里，基于页面的索引被维护，假设页码将被维护为 0 索引。
【讨论】：
以上是关于在 FlatList React Native 中仅显示 10 条记录的主要内容，如果未能解决你的问题，请参考以下文章
React Native - FlatList - 内部状态
react-native ScrollView 嵌套 FlatList滚动
在 Android 的 FlatList (React Native) 中隐藏滚动条