在 FlatList React Native 中仅显示 10 条记录

Question

我在我的 expo 应用程序中将数据从 API 获取到 FlatList，但问题是有超过 500 条记录，但我只想在 [=11= 中显示 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>
        );
    }
}

Answer 1

通过切片数组：

  <FlatList
                    data={this.state.itemList.slice(0, 10)}

Answer 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
     }
);

现在状态中有了数据，让我们将其渲染到 FlatList 组件中。在 render()、

const { itemList, currentPage } = this.state;
const startingIndex = currentPage + 10;
const endingIndex = startingIndex + 10;
const data = itemList.slice(startingIndex, endingIndex);

并像data={data}一样将数据传递给FlatList。

您需要有一个分页按钮组件，为此您将有一个可以维护的 onChange 功能，

handlePageChange = (currentPage) => {
    this.setState({
        currentPage
    })
}

P.S。此处，假设页码将保持在 0 索引上，则维护基于页面的索引。

在 FlatList React Native 中仅显示 10 条记录

Show only 10 records in FaltList React Native

javascript

react-native

axios

expo

react-native-flatlist