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"); // 修改这里的名称为 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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/753468.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

arcgis数据导出到excel

将arcgis属性数据导出到excel&#xff1a; 1&#xff09; 工具箱\系统工具箱\Conversion Tools.tbx\Excel\Excel 转表 2&#xff09;用excel打开导出的图层文件中后缀为.dbf的数据&#xff08;方便快捷&#xff0c;但是中文易乱码&#xff09;

phpstudy自定义安装mysql8.3并启动

phpstudy自定义安装mysql8.3并启动 先去官网:https://dev.mysql.com/downloads/下载压缩包文件 然后按下面的图片一步一步操作 选择版本&#xff0c;选择第一个压缩包文件&#xff0c;下载 下载完成后&#xff0c;解压到phpstudy环境目录下&#xff0c;如下图 然后进入mysq…

MySQL | CRUD

目录 1. Create 2. Retrieve 2.1. SELECT列 2.1.1. 全列查询 2.1.2. 指定列查询 2.1.3. 查询字段为表达式 2.1.4. 为查询结果指定别名 2.1.5. 结果去重 2.2. WHERE条件 2.2.1. 年龄小于19的同学 2.2.2. id在2~3的同学 2.2.3. id为1和4的同学 2.2.4. 姓张的同学及张…

集成学习 | 集成学习思想:Bagging思想

目录 一. Bagging思想1. Bagging 算法2. 随机森林(Random Forest)算法 在正文开始之前&#xff0c;我们先来聊一聊什么是集成学习&#xff1f; 集成学习是一种算法思想&#xff1a;将若干个弱学习器分组之后&#xff0c;产生一个新的学习器 弱学习器指预测误差在50%以下的学习器…

VS Code安装Live Server插件搭建web网页结合内网穿透实现公网访问

文章目录 前言1. 编写MENJA小游戏2. 安装cpolar内网穿透3. 配置MENJA小游戏公网访问地址4. 实现公网访问MENJA小游戏5. 固定MENJA小游戏公网地址 正文开始前给大家推荐个网站&#xff0c;前些天发现了一个巨牛的人工智能学习网站&#xff0c;通俗易懂&#xff0c;风趣幽默&…

性能测试-Jmeter常用元件基础使用

一、Jmeter元件 #线程组 添加HTTP请求 #配置元件 配置元件内的元件都是用于进行初始化的东西 #监听器 监听器主要是用来获取我们使用取样器发送请求后的响应数据相关信息 #定时器 定时器主要用来控制我们多久后执行该取样器&#xff08;发送请求&#xff09; #前置处理器 前置处…

【Python循环3/5】条件循环语句

目录 导入 条件循环 边界条件 while循环 死循环 while循环与for循环的区别 总结 知识图谱 导入 我们已经学习了如何利用for语句实现代码重复执行的循环结构。通过遍历列表&#xff0c;输出其中的每一个元素。 for循环就像是排队办事&#xff0c;一个个进入&#xff0c;轮…

爬虫逆向实战(35)-MyToken数据(MD5加盐)

一、数据接口分析 主页地址&#xff1a;MyToken 1、抓包 通过抓包可以发现数据接口是/ticker/currencyranklist 2、判断是否有加密参数 请求参数是否加密&#xff1f; 通过查看“载荷”模块可以发现有一个code参数 请求头是否加密&#xff1f; 无 响应是否加密&#xf…

HarmonyOS(鸿蒙)快速入门

一:下载开发工具 鸿蒙的开发工具叫DevEco 下载点击 其他部分都一直next 就行,这个页面出现的install 建议都点击install 然后单独选择安装目录 可能存在的问题 就是之前安装nodejs&#xff08;比如自己开发web或者RN等情况&#xff09;版本低 等情况 所以建议你单独安装一次 …

string的使用和模拟实现| 细致到strcpy ,strstr,strcmp都不放过

string的使用和模拟实现 string的成员变量string的构造方法用法无参的构造方法的实现全缺省的构造参数的实现 strcpy的模拟实现为什么这里的_size要1?为什么这里是默认传空字符串&#xff1f; 赋值运算符重载 析构函数遍历字符串operator[]使用传统c语言字符串下标遍历的缺点 …

【Linux系统编程】进程程序替换

介绍&#xff1a; 进程程序替换是指将一个进程中正在运行的程序替换为另一个全新的程序的过程&#xff0c;但替换不是创建新进程&#xff0c;只是将对应程序的代码和数据进行替换。具体来说&#xff0c;这个替换过程涉及将磁盘中的新程序加载到内存结构中&#xff0c;并重新建立…

防火墙常用功能配置

防火墙&#xff1a;为了限制不同区域之间的流量通信。默认有一条拒绝所有的策略。 现在的防火墙主要作用&#xff1a;是区域隔离和访问控制。 安全防护是核心特性 路由器&#xff1a;ACL列表&#xff0c;控制流量 入侵防御&#xff1a;网络攻击 文件过滤&#xff0c;内容过滤&…

电脑里的图片杂乱无章怎么办?使用汇帮批量重命名一键帮你解决 大量图片如何批量重命名?

当我们面临大量的图片需要重命名时&#xff0c;这无疑是一项繁琐而耗时的任务。然而&#xff0c;通过一些有效的方法和工具&#xff0c;我们可以使这个过程变得更加高效和轻松。以下介绍的这款汇帮批量重命名软件&#xff0c;能够帮助您有效地重命名大量的图片。 想要快速的进…

C++容器适配器与stack,queue,priority_queue(优先级队列)的实现以及仿函数(函数对象)与deque的简单介绍

&#x1f389;个人名片&#xff1a; &#x1f43c;作者简介&#xff1a;一名乐于分享在学习道路上收获的大二在校生 &#x1f648;个人主页&#x1f389;&#xff1a;GOTXX &#x1f43c;个人WeChat&#xff1a;ILXOXVJE &#x1f43c;本文由GOTXX原创&#xff0c;首发CSDN&…

【玩转AI绘画】有奖活动火热进行中,参与赢取耳机键盘等好礼!

AI 绘画发展迅猛&#xff0c;各种创新插件如 animatediff、instantid、controlnet 、roop 等遍地开花&#xff0c;极大地激发了 StableDiffusion 的应用潜力。AI 绘画的使用场景不断扩展&#xff0c;如 AI 视频制作、Q 版头像生成、老照片修复、照片高清化等。腾讯云高性能应用…

【OceanBase诊断调优】—— 敏捷诊断工具obdiag一键分析OB集群日志设计与实践

最近总结一些诊断OCeanBase的一些经验&#xff0c;出一个【OceanBase诊断调优】专题&#xff0c;也欢迎大家贡献自己的诊断OceanBase的方法。 1. 前言 obdiag定位为OceanBase敏捷诊断工具。1.2版本的obdiag支持诊断信息的一键收集&#xff0c;光有收集信息的能力&#xff0c;…

【nnUNetv2实践】一、nnUNetv2安装

nnUNet是一个自适应的深度学习框架&#xff0c;专为医学图像分割任务设计。以下是关于nnUNet的详细解释和特点&#xff1a; 自适应框架&#xff1a;nnUNet能够根据具体的医学图像分割任务自动调整模型结构、训练参数等&#xff0c;从而避免了繁琐的手工调参过程。自动化流程&am…

提升地理空间分析效率,火山引擎ByteHouse上线GIS能力

更多技术交流、求职机会&#xff0c;欢迎关注字节跳动数据平台微信公众号&#xff0c;回复【1】进入官方交流群 在数字化时代&#xff0c;地理空间分析&#xff08;Geospatial Analytics&#xff09;成为辅助企业市场策略洞察的重要手段。无论是广告投放的精准定位&#xff0c;…

Leetcode 1. 两数之和

心路历程&#xff1a; 很简单的题&#xff0c;双层暴力就可以&#xff0c;用双指针的话快一点。暴力时间复杂度O( n 2 n^2 n2)&#xff0c;双指针时间复杂度O(nlogn) O(n) O(n) O(nlogn)。 注意的点&#xff1a; 1、题目需要返回原数组的索引&#xff0c;所以排序后还需要…

豆瓣电影信息爬取与可视化分析

目录 一、项目背景 二、代码 三、总结 一、项目背景 &#xff08;1&#xff09;利用requests库采集豆瓣网分类排行榜 (“https://movie.douban.com/chart”)中各分类类别前100部电影的相关信息并存储为csv文件。 &#xff08;2&#xff09;利用获取的13个分类类别共1300部电…