顶部栏创建

最新推荐文章于 2024-01-04 10:59:51 发布

lzasdzxc

最新推荐文章于 2024-01-04 10:59:51 发布

阅读量68

点赞数

分类专栏：个人文章标签： Two

个人专栏收录该内容

2 篇文章 0 订阅

订阅专栏

模拟

import React, { Component } from "react";
import { View, Text, FlatList, Image, TouchableOpacity } from "react-native";
import { StackNavigator } from "react-navigation";
import Border2 from "./Border2";

class Item extends Component {
  render() {
    return (
      <View>
        <Text>{this.props.title}</Text>
        <View style={{ flexDirection: "row", width: "100%" }}>
          <Image
            source={{ uri: this.props.url }}
            style={{ width: 100, height: 100, borderRadius: 60 }}
          />
          <View
            style={{
              flexDirection: "row",
              flex: 1,
              flexWrap: "wrap",
              marginLeft: 10
            }}
          >
            <Text style={{ marginTop: 15 }}>{this.props.name}</Text>

            <Text style={{ marginLeft: 120 }}>阅读量：</Text>
            <Text>7</Text>

            <View style={{ flexDirection: "row" }}>
              <Text style={{ marginTop: 15 }}>{this.props.name}</Text>

              <Text style={{ marginLeft: 120 }}>回复量：</Text>
              <Text>3</Text>
            </View>
          </View>
        </View>
      </View>
    );
  }
}

class Border1 extends Component {
  // static navigationOptinos = { header: null };
  constructor(props) {
    super(props);
    this.state = {
      dataValue: [],
      page: 1,

      Quanrefresh: false
    };
  }

  componentDidMount() {
    this.Headerrefresh();
  }
  //下拉刷新
  Headerrefresh = () => {
    this.setState(
      {
        Quanrefresh: true
      },
      () => {
        fetch("https://cnodejs.org/api/v1/topics?page=1&limit=10")
          .then(response => response.json()) //把请求的数据转为对象的形式
          .then(responseJson => {
            this.setState({
              Quanrefresh: false,
              dataValue: responseJson.data //将上面请求的数据通过箭头函数，加入数组
            });
          });
      }
    );
  };

  //上拉加载

  Bottomrefresh = () => {
    this.setState(
      {
        page: this.state.page + 1,
        Quanrefresh: true
      },
      () => {
        fetch(
          "https://cnodejs.org/api/v1/topics?page=" +
            this.state.page +
            "&limit=10"
        )
          .then(response => response.json()) //把请求的数据转为对象的形式
          .then(responseJson => {
            this.setState({
              Quanrefresh: false,
              dataValue: [...this.state.dataValue, ...responseJson.data] //将上面请求的数据通过箭头函数，加入数组
            });
          });
      }
    );
  };

  render() {
    return (
      <View>
        <FlatList
          data={this.state.dataValue}
          renderItem={({ item }) => {
            return (
              //点击事件
              <TouchableOpacity
                //定义一个箭头函数，用来跳转传值
                onPress={() => {
                  this.props.navigation.navigate("Border2", {
                    title: item.title,
                    content: item.content
                  });
                }}
              >
                <Item
                  url={item.author.avatar_url}
                  title={item.title}
                  name={item.author.loginname}
                />
              </TouchableOpacity>
            );
          }}
          refreshing={this.state.Quanrefresh} //延时请求
          onRefresh={this.Headerrefresh}
          onEndReached={this.Bottomrefresh} //上啦加载
          onEndReachedThreshold={0.0001} //判断数据是否处于底部，然后开始加载，0.0001的距离
        />
      </View>
    );
  }
}
const Tiao = StackNavigator({
  Border1: { screen: Border1, navigationOptions: { header: null } },
  Border2: { screen: Border2 }
});
export default Tiao;

border2232332

import React, { Component } from "react";
import { Text, View, ScrollView } from "react-native";
import HTML from "react-native-render-html";
export default class Border2 extends Component {
  static navigationOptions = ({ navigation }) => ({
    title: navigation.getParam("title", "年hi偶奇偶")
  });
  render() {
    return (
      <View>
        <ScrollView>
          <HTML html={this.props.navigation.getParam("content", "梁矗")} />
        </ScrollView>
      </View>
    );
  }
}

Three ——展示代码，

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

class Item extends Component {
  render() {
    return (
      <View>
        <Text>{this.props.title}</Text>
        <View style={{ flexDirection: "row" }}>
          <Image
            source={{ uri: this.props.url }}
            style={{ width: 100, height: 100 }}
          />
          <Text>{this.props.name}</Text>
        </View>
      </View>
    );
  }
}

export default class Border3 extends Component {
  constructor(props) {
    super(props);
    this.state = { dataValue: [] };
  }

  componentDidMount() {
    fetch(`https://cnodejs.org/api/v1/topics?page=1&tab=good&limit=10`)
      .then(response => response.json())
      .then(responseJson => {
        this.setState({
          dataValue: responseJson.data
        });
      });
  }

  render() {
    return (
      <View>
        <FlatList
          data={this.state.dataValue}
          renderItem={({ item }) => {
            return (
              <Item
                url={item.author.avatar_url}
                title={item.title}
                name={item.author.loginname}
              />
            );
          }}
        />
      </View>
    );
  }
}