作业要求:
利用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"); // 修改这里的名称为 setTabuseEffect(() => {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={{ b