React Native FlatListView Demo

在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/3.jpg"),
          title: "商品4",
          subTitle: "描述4"
        },
        {
          image: require("./images/3.jpg"),
          title: "商品5",
          subTitle: "描述5"
        },
        {
          image: require("./images/3.jpg"),
          title: "商品6",
          subTitle: "描述6"
        },
        {
          image: require("./images/3.jpg"),
          title: "商品7",
          subTitle: "描述7"
        },
        {
          image: require("./images/3.jpg"),
          title: "商品8",
          subTitle: "描述8"
        },
        {
          image: require("./images/3.jpg"),
          title: "商品9",
          subTitle: "描述9"
        }
      ]
    };
  }

  render() {
    const advertisementCount = this.state.advertisements.length;
    const indicatorWidth =
      circlesize * advertisementCount + circleMargin * advertisementCount * 2;    //这个的思维模式是space-around思维
    const left = (Dimensions.get("window").width - indicatorWidth) / 2;

    return (
      <View style={styles.container}>
        <StatusBar
          backgroundColor={"blue"}
          barStyle={"default"}
          networkActivityIndicatorVisible={true}
        />
        <View style={styles.searchbar}>
          <TextInput
            style={styles.input}
            placeholder="搜索商品" //哈哈哈
            onChangeText={text => {
              this.setState({ searchText: text });
              console.log("输入的内容是 " + this.state.searchText, null, null);
            }}
          />
          <Button
            style={styles.button}
            title="搜索"
            onPress={() => {
              Alert.alert("搜索内容" + this.state.searchText, null, null);
            }}
          />
        </View>
        <View style={styles.advertisement}>
          <ScrollView
            ref="scrollView"
            horizontal={true}
            showsHorizontalScrollIndicator={false}
            pagingEnable={true}
          >
            {this.state.advertisements.map((advertisement, index) => {
              return (
                <TouchableHighlight
                  key={index}
                  onPress={() => Alert.alert("你单击了轮播图", null, null)}
                >
                  <Image
                    style={styles.advertisementContent}
                    source={advertisement.image}
                  />
                </TouchableHighlight>
              );
            })}
          </ScrollView>
          <View
            style={[
              styles.indicator,
              {
                left: left
              }
            ]}
          >
            {this.state.advertisements.map((advertisement, index) => {
              return (
                <View
                  key={index}
                  style={
                    index === this.state.currentPage
                      ? styles.circleSelected
                      : styles.circle
                  }
                />
              );
            })}
          </View>
        </View>
        <View style={styles.products}>
          <FlatList
            data={this.state.dataSource}       //data是属性
            renderItem={this._renderRow}
            renderSeparator={this._renderSeperator}
            refreshControl={this._renderRefreshControl()}
            keyExtractor = {this._extraUniqueKey}
          />
        </View>
      </View>
    );
  }

_extraUniqueKey(item,index) {
  return "index" + index + item
}

  _renderRow({item}) {
    return (
      <TouchableHighlight
      onPress={() => Alert.alert("你单击了商品列表", null, null)}
      >
      <View style={styles.row}>
        <Image source={item.image} style={styles.productsImage} />
        <View style={styles.productText}>
          <Text style={styles.productsTitle}>{item.title}</Text>
          <Text style={styles.productsSubTitle}>{item.subTitle}</Text>
        </View>
      </View>
      </TouchableHighlight>
    );
  }

  _renderSeperator(sectionID, rowID, adjacentRowHighlighted) {
    return <View key={"${sectionID} - ${rowID}"} style={styles.divider} />;
  }

  componentDidMount() {
    this._startTimer();
  }

  componentWillUnmount() {
    clearInterval(this.interval);
  }

  _startTimer() {
    this.interval = setInterval(() => {
      //使用setInterval创建定时器
      nextPage = this.state.currentPage + 1;
      if (nextPage >= 3) {
        nextPage = 0;                           //如果已经滚动到最后一页，下次返回第一页
      }
      this.setState({ currentPage: nextPage }); // 更新nextSate中的 currentstate
      const offsetX = nextPage * Dimensions.get("window").width; // 计算ScrollView 滚动的X轴偏移量（因为是横向滚动）
      this.refs.scrollView.scrollResponderScrollTo({
        x: offsetX,
        y: 0,
        animated: true
      });
    }, 2000); //设置定时器的时间间隔为2s
  }

  _renderRefreshControl() {
    return (
      <RefreshControl
        refreshing={this.state.isRefreshing}
        onRefresh={this._onRefresh}
        tintColor={"#FF0000"}
        title={"正在刷新数据，请稍后..."}
        titleColor={"#0000FF"}
      />
    );
  }

  //刷新
  _onRefresh = () => {
    this.setState({ isRefreshing: true });

    setTimeout(() => {
      const products = Array.from(new Array(10)).map((value, index) => ({
        image: require("./images/1.jpg"),
        title: "新商品" + index,
        subTitle: "新商品描述" + index
      }));
      this.setState({
        isRefreshing: false,
        dataSource: products
      });
    }, 2000);
  };
}

const styles = StyleSheet.create({
  container: {
    flex: 1
  },
  searchbar: {
    marginTop: Platform.OS === "ios" ? 20 : 0,
    height: 40,
    flexDirection: "row"
  },
  input: {
    flex: 1,
    borderColor: "gray",
    borderWidth: 2,
    borderRadius: 10
  },
  button: {
    flex: 1
  },
  advertisementContent: {
    width: Dimensions.get("window").width,
    height: 180
  },
  row: {
    height: 60,
    alignItems: "center",     //项目交叉轴上如何对齐，在列上如何对齐
    backgroundColor: "white",
    flexDirection: "row"
  },
  productsImage: {
    width: 40,
    height: 40,
    marginLeft: 10,
    marginTop:10,
    marginRight: 10,
    alignSelf: "flex-start",
    borderRadius: 5,
  },
  products: {
    flex: 1,
  },
  productText: {
    flex: 1,
    marginTop: 10,
    marginBottom: 10,
  },
  productsTitle: {
    flex: 3,
    fontSize: 16
  },
  productsSubTitle: {
    flex: 2,
    fontSize: 14,
    color: "gray"
  },
  indicator: {
    position: "absolute",
    top: 160,
    flexDirection: "row"
  },
  circle: {
    width: circlesize,
    height: circlesize,
    borderRadius: circlesize / 2,
    backgroundColor: "gray",
    marginHorizontal: circleMargin
  },
  circleSelected: {
    width: circlesize,
    height: circlesize,
    borderRadius: circlesize / 2,
    backgroundColor: "white",
    marginHorizontal: circleMargin
  },
  divider: {
    height: 1,
    width: Dimensions.get("window").width - 5,
    marginLeft: 5,
    backgroundColor: "lightgray"
  }
});

效果图初始情况：

下拉刷新后数据源变了的情况：