解析数据点击条目跳转List.js

//在util下新建List.js

import React, { Component } from "react";

import { FlatList, TouchableOpacity, Image, Text, View } from "react-native";

//导出列表

import { withNavigation } from "react-navigation";

//get和post

import { getData } from "../util/fetchData";

class List extends Component {

  constructor(props) {

    super(props);

    this.state = {

      refreshed: false, //默认不显示刷新图标

      page: 1, //请求第几页

      tab: this.props.tab, //类别

      limit: 10, //每页请求的数量

      data: [] //后台获取的数据

    };

  }

  //网络请求第一次进来自动刷新数据

  componentDidMount() {

    this.requestFirstPage();

  }

  requestData = async () => {

    //调用get方法

    let res = await getData("/topics", {

      page: this.state.page,

      tab: this.state.tab,

      limit: this.state.limit

    });

    return res;

  };

  requestFirstPage = () => {

    //重置为第一页之后,在请求数据

    this.setState(

      {

        page: 1,

        refreshed: true

      },

      //回调函数

      async () => {

        let res = await this.requestData();

        this.setState({

          data: res.data,

          //图标消失

          refreshed: false

        });

      }

    );

  };

  requestNextPage = () => {

    //请求下一页，page+1

    this.setState(

      {

        page: this.state.page + 1

      },

      async () => {

        let res = await this.requestData();

        //合并以前的数据

        this.setState({

          data: [...this.state.data, ...res.data]

        });

      }

    );

  };

  render() {

    return (

      <FlatList

        data={this.state.data}

        //条目

        renderItem={({ item }) => {

          return (

            //点击事件

            <TouchableOpacity

              onPress={() => {

                this.props.navigation.navigate("Detail", {

                  item: JSON.stringify(item)

                });

              }}

            >

              <View style={{ flexDirection: "row", padding: 20 }}>

                <Image

                  style={{

                    width: 52,

                    height: 52,

                    //圆角

                    borderRadius: 16

                  }}

                  source={{ uri: item.author.avatar_url }}

                />

                <Text

                  style={{

                    padding: 20,

                    borderBottomWidth: 0.5,

                    borderBottomColor: "#00ff00",

                    flex: 9

                  }}

                >

                  {item.title}

                </Text>

              </View>

            </TouchableOpacity>

          );

        }}

        //下标

        keyExtractor={(item, index) => index.toString()}

        //进度条可以显示圆圈

        refreshing={this.state.refreshed}

        onRefresh={this.requestFirstPage}

        //请求下一页

        onEndReached={this.requestNextPage}

        onEndReachedThreshold={0.0001}

      />

    );

  }

}

export default withNavigation(List);