React Native FlatListView Demo-CSDN博客

本文链接：https://blog.csdn.net/baihailing/article/details/85230997

本文演示了在React Native中如何使用FlatList实现上拉刷新，并结合轮播图展示数据。代码示例详细展示了App.js文件中的实现，包括初始状态和下拉刷新后数据更新的效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在App.js 文件里，复制下面代码：

该功能包括轮播图的使用，FlatList 上拉刷新等。

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 *
 * @format
 * @flow
 */

import React, { Component } from "react";
import {
  AppRegistry,
  Platform,
  StyleSheet,
  Text,
  View,
  TextInput,
  Button,
  ScrollView,
  Dimensions,
  FlatList,
  Alert,
  StatusBar,
  TouchableHighlight,
  Image,
  RefreshControl
} from "react-native";

const circlesize = 8;
const circleMargin = 5;

export default class home extends Component {
  constructor(props) {
    //构造函数
    super(props);
    this.state = {
      isRefreshing: false, //是否正在刷新的标志
      searchText: "",
      advertisements: [
        //轮播广告数组
        {
          //url:'https://img13.360buyimg.com/cms/jfs/t4090/228/1399180862/217278/206073fe/5874e621Nc675c6d0.jpg'
          image: require("./images/1.jpg")
        },
        {
          //url:'https://img13.360buyimg.com/cms/jfs/t3937/164/1340098884/295670/ca0ebbaf/58703afbN5336c28d.jpg'
          image: require("./images/2.jpg")
        },
        {
          //url:'https://img14.360buyimg.com/cms/jfs/t3190/189/5382195407/297118/377d637e/586f5b7bN9c81c29c.jpg'
          image: require("./images/3.jpg")
        }
      ],
      currentPage: 0,
      dataSource: [
        {
          image: require("./images/1.jpg"),
          title: "商品1",
          subTitle: "描述1"
        },
        {
          image: require("./images/2.jpg"),
          title: "商品2",
          subTitle: "描述2"
        },
        {
          image: require("./images/3.jpg"),
          title: "商品3",
          subTitle: "描述3"
        },
        {
          image: require("./images