Hybrid第二次雪梨作业

作业要求：
 

利用ReactNative和Axios完成以下效果。

注意：

1、RN不能直接引用svg图片，需使用第三方库，可将logo图片换成百度logo

2、搜索框可不要搜索图标

3、“全部”“精华”等前5项类型切换功能要实现（“客户端测试可不写”，接口没给出参数值），调用 https://cnodejs.org/api/v1/topics 接口，传递tab参数即可，具体参数值看接口文档，不用管页数的切换。

4、帖子列表中头像右侧的标签，tab类型切换时，标签样式保持一直即可。

import React from "react";

import {
  Image,
  StyleSheet,
  Text,
  TextInput,
  ScrollView,
  TouchableOpacity,
  View,
} from "react-native";
import { useState, useEffect } from "react";
import axios from "axios";

export default function App() {
  const [selectedItem, setSelectedItem] = useState(null);
  const [stuff, setStuff] = useState([]);
  const [tab, setTab] = useState("all"); // 修改这里的名称为 setTab

  useEffect(() => {
    axios
      .get(`https://cnodejs.org/api/v1/topics?tab=${tab}`)
      .then((res) => {
        setStuff(res.data.data);
      })
      .catch((error) => {
        console.error("Error fetching data:", error);
      });
  }, [tab]);

  const handleItemPress = (item) => {
    setSelectedItem(item);
  };

  const getTime = (time) => {
    const curDate = new Date();
    const lastReplyDate = new Date(time);
    const diff = Math.abs(curDate - lastReplyDate);
    const seconds = Math.floor(diff / 1000);
    const minutes = Math.floor(seconds / 60);
    const hours = Math.floor(minutes / 60);
    const days = Math.floor(hours / 24);
    const months = Math.floor(days / 30);
    const years = Math.floor(days / 365);

    if (years > 0) {
      return `${years}年前`;
    } else if (years <= 0 && months > 0) {
      return `${months}月前`;
    } else if (months <= 0 && days > 0) {
      return `${days}天前`;
    } else if (days <= 0 && hours > 0) {
      return `${hours}小时前`;
    } else if (hours <= 0 && minutes > 0) {
      return `${minutes}分钟前`;
    } else if (minutes <= 0 && seconds > 0) {
      return `${seconds}秒前`;
    }
  };

  return (
    <ScrollView style={{ backgroundColor: "#E1E1E1" }}>
      {/* 这里是标头黑色的部分 */}
      <ScrollView
        style={{
          backgroundColor: "#444444",
          paddingBottom: 10,
        }}
      >
        <Image
          source={{
            uri: "https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png",
          }}
          style={{
            alignItems: "center",
            height: 100,
            width: "100%",
            resizeMode: "contain",
          }}
        />
        {/* <View style={styles.inputContainer}> */}
        <TextInput style={styles.textInput} placeholder="Enter text" />
        {/* </View> */}
        <ScrollView>
          <TouchableOpacity style={{ flexDirection: "row", flexWrap: "wrap" }}>
            <Text style={styles.textStyle}>首页</Text>
            <Text style={styles.textStyle}>未读消息</Text>
            <Text style={styles.textStyle}>新手入门</Text>
            <Text style={styles.textStyle}>API</Text>
            <Text style={styles.textStyle}>关于</Text>
            <Text style={styles.textStyle}>设置</Text>
            <Text style={styles.textStyle}>退出</Text>
          </TouchableOpacity>
        </ScrollView>
      </ScrollView>
      <ScrollView style={{ backgroundColor: "#F6F6F4", marginTop: 20 }}>
        <TouchableOpacity style={{ flexDirection: "row", flexWrap: "wrap" }}>
          {/* backgroundColor: tab === 'all' ? '#80bd01' : '#fff', */}
          <View
            style={[
              styles.logoContainer,
              selectedItem === "全部" && styles.selectedItem,
            ]}
          >
            <Text
              // style={styles.logo}
              style={[
                styles.logo,
                selectedItem === "全部" && styles.selectedText,
              ]}
              onPress={() => {
                handleItemPress("全部"), setTab("all");
              }}
            >
              全部
            </Text>
          </View>
          <View
            style={[
              styles.logoContainer,
              selectedItem === "精华" && styles.selectedItem,
            ]}
          >
            <Text
              // style={styles.logo}
              style={[
                styles.logo,
                selectedItem === "精华" && styles.selectedText,
              ]}
              onPress={() => {
                handleItemPress("精华"), setTab("good");
              }}
            >
              精华
            </Text>
          </View>
          <View
            style={[
              styles.logoContainer,
              selectedItem === "分享" && styles.selectedItem,
            ]}
          >
            <Text
              // style={styles.logo}
              style={[
                styles.logo,
                selectedItem === "分享" && styles.selectedText,
              ]}
              onPress={() => {
                handleItemPress("分享"), setTab("share");
              }}
            >
              分享
            </Text>
          </View>
          <View
            style={[
              styles.logoContainer,
              selectedItem === "问答" && styles.selectedItem,
            ]}
          >
            <Text
              // style={styles.logo}
              style={[
                styles.logo,
                selectedItem === "问答" && styles.selectedText,
              ]}
              onPress={() => {
                handleItemPress("问答"), setTab("ask");
              }}
            >
              问答
            </Text>
          </View>
          <View
            style={[
              styles.logoContainer,
              selectedItem === "招聘" && styles.selectedItem,
            ]}
          >
            <Text
              // style={styles.logo}
              style={[
                styles.logo,
                selectedItem === "招聘" && styles.selectedText,
              ]}
              onPress={() => {
                handleItemPress("招聘"), setTab("job");
              }}
            >
              招聘
            </Text>
          </View>
          <View
            style={[
              styles.logoContainer,
              selectedItem === "客户端测试" && styles.selectedItem,
            ]}
          >
            <Text
              // style={styles.logo}
              style={[
                styles.logo,
                selectedItem === "客户端测试" && styles.selectedText,
              ]}
              onPress={() => {
                handleItemPress("客户端测试"), setTab("dev");
              }}
            >
              客户端测试
            </Text>
          </View>
          {/* <Text style={styles.logo}>全部</Text>
          <Text style={styles.logo}>精华</Text>
          <Text style={styles.logo}>分享</Text>
          <Text style={styles.logo}>问答</Text>
          <Text style={styles.logo}>招聘</Text>
          <Text style={styles.logo}>客户端测试</Text> */}
        </TouchableOpacity>
        <View>
          {stuff.map((item, index) => {
            return (
              <View
                key={item.id}
                style={{
                  flexDirection: "row",
                  marginTop: 7,
                  paddingBottom: 7,
                  borderBottomColor: "#ccc",
                  borderBottomWidth: 1,
                }}
              >
                <Image
                  source={{ uri: item.author.avatar_url }}
                  style={{
                    width: 45,
                    height: 45,
                    resizeMode: "contain",
                    borderRadius: 10,
                    marginLeft: 5,
                  }}
                />
                <View style={styles.view}>
                  <Text style={styles.tab}>
                    {tab === "share"
                      ? "分享"
                      : tab === "ask"
                      ? "问答"
                      : tab === "job"
                      ? "招聘"
                      : tab === "dev"
                      ? "测试"
                      : tab === "good"
                      ? "精华"
                      : item.tab === "share"
                      ? "分享"
                      : item.tab === "ask"
                      ? "问答"
                      : "全部"}
                  </Text>
                </View>
                <View style={{ marginTop: 10 }}>
                  <Text style={{ marginLeft: 5 }}>
                    {item.title < 18
                      ? item.title
                      : item.title.substr(0, 18) + "..."}
                  </Text>
                  <Text
                    style={{ marginLeft: 5, fontSize: 10, paddingBottom: 0 }}
                  >
                    <Text style={{ color: "#9e78c0" }}>{item.reply_count}</Text>
                    /{item.visit_count}
                  </Text>
                </View>
                <Text
                  style={{
                    color: "#999",
                    fontSize: 10,
                    marginLeft: "auto",
                    marginTop: 30,
                  }}
                >
                  {getTime(item.last_reply_at)}
                </Text>
              </View>
            );
          })}
        </View>
      </ScrollView>
    </ScrollView>
  );
}

const styles = StyleSheet.create({
  textInput: {
    width: "60%",
    height: "15%",
    alignItems: "center",
    backgroundColor: "#888888",
    marginLeft: 100,
    borderRadius: 50,
  },

  textStyle: {
    color: "white",
    marginTop: "2%",
    marginLeft: "10%",
  },

  logo: {
    color: "#80BE07",
    marginTop: "2%",
  },
  logoContainer: {
    justifyContent: "center",
    // width:40,
    height: 30,
    borderRadius: 8,
    // backgroundColor: "#fff",
    marginLeft: "8%",
    alignItems: "center",
    paddingLeft: 5,
    paddingRight: 5,
    marginTop: 5,
    marginButtom: 5,
  },
  selectedItem: {
    backgroundColor: "#80BE07",
    color: "#fff",
  },
  selectedText: {
    color: "#fff",
  },
  tab: {
    height: 25,
    width: 40,
    backgroundColor: "#E8E8E8",
    color: "#909598",
    marginLeft: 5,
    textAlign: "center",
    borderRadius: 3,
  },
  view: {
    flexDirection: "row",
    height: 45,
    textAlign: "center",
    alignItems: "center",
    justifyContent: "center",
  },
});