ReactNative（2）{网络请求、FlatList组件、触底加载/下拉刷新/回到顶部/元素绑定}

一、网络请求

// rnc
/***
 * View: 不可以滚动
 *
 * ScrollView: 可以滚动
 *
 * 将接口数据展示到页面上 实现的基本步骤:
 * 发送请求=>接收返回数据=>存储本地=>展示渲染
 *
 */
import React, { Component } from "react";
import { Text, View, Dimensions, Image, ScrollView } from "react-native";
// rpx计算
const rpx = (x) => (Dimensions.get("window").width / 750) * x;
export default class App extends Component {
  // state 组件状态
  state = { result: [] };
  // 组件挂在时触发
  componentDidMount() {
    const url = "https://api.apiopen.top/getWangYiNews";
    // 发送请求调用接口
    fetch(url)
      .then((res) => res.json())
      .then((res) => {
        console.log(res);
        /***
         * RN中 控制台打印的信息  需要在命令行控制台查看
         * 使用起来不方法,RN提供了debug调试模式
         * 注意:调试模式目前还不是太稳定,需要时候打开它,不使用的时候关闭。否则,会出现一些奇怪的问题。异常的报错,一些功能异常失效。
         * 调试模式打开方式:
         * 1.cmd里 敲d 打开开发者菜单
         * 2.模拟器里选择菜单  debug
         * 3.浏览器弹出debug ui工具
         * 打开console就可以看到打印信息了
         *
         * 关闭和打开过程类似 先cmd里敲d 模拟器选择stopping dugging
         *
         *  */
        this.setState({ result: res.result });
      });
  }
  showNews() {
    return this.state.result.map((item, index) => {
      return (
        <View
          key={index}
          style={
  { flexDirection: "row", borderBottomWidth: 1 }}
        >
          <Image
            source={
  { uri: item.image }}
            style={
  { width: rpx(250), height: rpx(150) }}
          ></Image>
          <View style={
  { flex: 1, justifyContent: "space-between" }}>
            <Text style={
  { fontSize: rpx(25) }}>{item.title}</Text>
            <Text style={
  { fontSize: rpx(25) }}>{item.passtime}</Text>
          </View>
        </View>
      );
    });
  }
  render() {
    return (
      // 用ScrollView替换原来的View 使页面可以滚动
      <ScrollView>
        {/* 调用方法 实现页面的展示 */}
        {this.showNews()}
      </ScrollView>
    );
  }
}

二、FlatList组件

高能性能列表组件，提供了多个属性使用。方便开发者快速开一些功能。

①FlatList核心属性

FlatList 三个核心属性：

• data 需要显示的数组数据
• renderItem 数组每个元素对应的UI界面标签和样式