第五篇：【传奇开心果系列】Ant Design Mobile of React移动应用开发：基础页面制作介绍和示例代码_react开发页面

于 2024-05-03 21:47:06 发布
阅读量14 收藏 17
点赞数 13
分类专栏： 程序员 文章标签： react.js 前端 前端框架
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2401_84584628/article/details/138425511
版权 
    <Input type="password" placeholder="确认密码" />
  </Form.Item>
  <Button type="primary" htmlType="submit">注册</Button>
</Form>

);
};


![在这里插入图片描述](https://img-blog.csdnimg.cn/direct/009a60c380ae493a9b1ecbb00f1c99bf.jpeg#pic_center)  
 3. 主页示例代码：

import { TabBar } from ‘antd-mobile’;

const HomePage = () => {
const [selectedTab, setSelectedTab] = useState(‘home’);

return (
<div style={{ position: ‘fixed’, height: ‘100%’, width: ‘100%’, top: 0 }}>

<TabBar.Item
title=“首页”
key=“home”
selected={selectedTab === ‘home’}
onPress={() => setSelectedTab(‘home’)}
>
{/* 主页内容 /}
</TabBar.Item>
{/ 其他TabBar.Item */}


);
};


![在这里插入图片描述](https://img-blog.csdnimg.cn/direct/d8d792a6ba6649838941bff1dc917b6a.jpeg#pic_center)  
 4. 个人中心示例代码：

import { List } from ‘antd-mobile’;

const ProfilePage = () => {
return (

<List.Item thumb=“avatar.png”>用户名</List.Item>
{/* 其他个人信息项 */}
<List.Item arrow=“horizontal”>修改密码</List.Item>
<List.Item arrow=“horizontal”>退出登录</List.Item>

);
};


![在这里插入图片描述](https://img-blog.csdnimg.cn/direct/269223862fdd4b46a1f715eca308f67b.png#pic_center)  
 5. 列表页示例代码：

import { List } from ‘antd-mobile’;

const ListPage = () => {
return (

<List.Item>列表项1</List.Item>
<List.Item>列表项2</List.Item>
<List.Item>列表项3</List.Item>
{/* 更多列表项 */}

);
};


![在这里插入图片描述](https://img-blog.csdnimg.cn/direct/85b1dc7f0b1b4b59821a3fc75d5306a8.jpeg#pic_center)  
 6. 详情页示例代码：

import { Card, List, Accordion } from ‘antd-mobile’;

const DetailPage = () => {
return (

<Card.Header title=“详情页标题” />
<Card.Body>
<List renderHeader={() => ‘基本信息’}>
<List.Item>详情项1</List.Item>
<List.Item>详情项2</List.Item>
<List.Item>详情项3</List.Item>
{/* 其他详情项 /}


<Accordion.Panel header=“更多信息”>
{/ 更多详细内容 */}
</Accordion.Panel>

</Card.Body>

);
};


![在这里插入图片描述](https://img-blog.csdnimg.cn/direct/d0d5fe54b58a482ab7b394d59fbc7c03.jpeg#pic_center)  
 7. 设置页示例代码：

import { Form, Input, Checkbox } from ‘antd-mobile’;

const SettingsPage = () => {
return (

<Form.Item name=“username” rules={[{ required: true, message: ‘请输入用户名’ }]}>

</Form.Item>
<Form.Item name=“email” rules={[{ required: true, message: ‘请输入邮箱’ }]}>

</Form.Item>
<Form.Item name=“notifications”>
接收通知
</Form.Item>
{/* 其他设置项 */}

);
};


![在这里插入图片描述](https://img-blog.csdnimg.cn/direct/c2e8027d25914d42ac44196042cd3d33.png#pic_center)  
 8. 搜索页示例代码：

import { SearchBar, List } from ‘antd-mobile’;

const SearchPage = () => {
return (




<List.Item>搜索结果1</List.Item>
<List.Item>搜索结果2</List.Item>
<List.Item>搜索结果3</List.Item>
{/* 更多搜索结果 */}


);
}; 


![在这里插入图片描述](https://img-blog.csdnimg.cn/direct/75f5b67c4d07439294724ec9491ece9c.jpeg#pic_center)  
 9. 升级页示例代码：

import { List, Button } from ‘antd-mobile’;

const UpgradePage = () => {
return (

<List.Item extra=“v1.0.0”>当前版本</List.Item>
<List.Item>
检查更新
</List.Item>

);
};


以上是对于登录页、注册页、主页、个人中心、列表页、详情页、设置页、搜索页和升级页的示例代码。你可以根据具体需求进行修改和定制，以满足你的应用界面的需求。请确保在使用AMR组件时参考官方文档，了解每个组件的详细使用方法和属性。如果有任何问题，请随时提问。


## 四、页面跳转切换路由综合示例


当涉及到多个页面之间的切换或导航时，可以使用React Router库来实现路由管理。以下是一个综合示例，展示如何在Ant Design Mobile of React（AMR）中使用React Router实现这九个基础页面的切换和导航：


![在这里插入图片描述](https://img-blog.csdnimg.cn/direct/a19f6b51579b40aabb44ace8bc43d170.jpeg#pic_center)

import { BrowserRouter as Router, Route, Link } from ‘react-router-dom’;
import { TabBar } from ‘antd-mobile’;

const HomePage = () => {
return

主页内容

;
};

const LoginPage = () => {
return

登录页内容

;
};

const RegisterPage = () => {
return

注册页内容

;
};

const ProfilePage = () => {
return

个人中心内容

;
};

const ListPage = () => {
return

列表页内容

;
};

const DetailPage = () => {
return

详情页内容

;
};

const SettingsPage = () => {
return

设置页内容

;
};

const SearchPage = () => {
return

搜索页内容

;
};

const UpgradePage = () => {
return

升级页内容

;
};

const App = () => {
const [selectedTab, setSelectedTab] = useState(‘home’);

return (

<div style={{ position: ‘fixed’, height: ‘100%’, width: ‘100%’, top: 0 }}>

<TabBar.Item
title=“首页”
key=“home”
selected={selectedTab === ‘home’}
onPress={() => setSelectedTab(‘home’)}
>
主页
</TabBar.Item>
<TabBar.Item
title=“个人中心”
key=“profile”
selected={selectedTab === ‘profile’}
onPress={() => setSelectedTab(‘profile’)}
>
个人中心
</TabBar.Item>
{/* 其他TabBar.Item */}












);
};

export default App;


在上面的示例中，我们使用了React Router来管理不同页面的路由，通过`Link`组件实现页面之间的导航。在`TabBar.Item`的`onPress`事件中，通过`setSelectedTab`函数来切换选中的Tab，并使用`Link`组件的`to`属性来指定要导航到的路径。


每个页面都被定义为一个函数组件，并通过`Route`组件来匹配对应的路径，并渲染相应的组件。


你可以根据实际需求修改每个页面组件的内容和样式，并根据需要添加其他页面和路由。


希望这个综合示例能够帮助你理解如何在AMR中使用React Router实现页面切换和导航。如果有任何问题，请随时提问。


## 五、知识点归纳


![在这里插入图片描述](https://img-blog.csdnimg.cn/direct/e536112dd21f4243803f9121b4e37b97.jpeg#pic_center)  
 当涉及到Ant Design Mobile of React（AMR）的基础页面登录页、注册页、主页、个人中心、列表页、详情页、设置页、搜索页和升级页的开发时，以下是一些需要注意的知识点的总结：


1. 组件使用：AMR提供了丰富的组件库，如Form、Input、Button、List、Card、Accordion等，可以根据需求选择合适的组件来构建各个页面。
2. 表单验证：使用AMR的Form组件和表单验证规则来实现对用户输入的验证，确保数据的准确性和完整性。
3. 导航菜单和路由管理：导航菜单，使用AMR的TabBar和TabBarItem组件来创建主页的导航菜单，并通过选中状态切换页面。路由管理：使用React Router库来管理不同页面之间的路由，通过Route组件匹配路径并渲染相应的组件，通过Link组件实现页面之间的导航。
4. 页面布局：使用AMR的Card、List等组件来创建页面的布局结构，包括标题、描述、图标等内容。
5. 表单输入：使用AMR的Input、Checkbox等组件来实现用户的输入，包括用户名、密码、邮箱等。
6. 消息提示：使用AMR的Toast、Message等组件来显示登录失败、注册成功等消息提示。
7. 页面跳转：使用Link组件和React Router的编程式导航来实现页面之间的跳转。
8. 数据展示：使用AMR的List和ListItem组件来展示列表页和搜索页的数据列表，可以自定义内容和样式。
9. 版本管理：使用AMR的List和Button组件来展示当前应用的版本信息，并提供升级功能。
10. 折叠展开：使用AMR的Accordion组件实现详情页内容的折叠展开效果，提供更多详细信息。


以上是对于开发这九个基础页面时需要注意的一些知识点的总结。通过合理运用AMR的组件和React Router的路由管理，你可以构建出美观、功能丰富的移动应用界面。如果有任何进一步的问题，请随时提问。


## 六、前面提到的知识点的分别示例代码：


![在这里插入图片描述](https://img-blog.csdnimg.cn/direct/12d6e254d1e149c4ad6610f71a4c7b4f.webp#pic_center)


1. 组件使用示例：

import { Form, Input, Button, List, Card, Accordion } from ‘antd-mobile’;

const ExampleComponent = () => {
return (



<Form.Item>

</Form.Item>
<Form.Item>

</Form.Item>
登录 

  <List>
    <List.Item>列表项1</List.Item>
    <List.Item>列表项2</List.Item>
    <List.Item>列表项3</List.Item>
  </List>

  <Card>
    <Card.Header title="详情页标题" />
    <Card.Body>
      <List>
        <List.Item>详情项1</List.Item>
        <List.Item>详情项2</List.Item>
        <List.Item>详情项3</List.Item>
      </List>
      <Accordion>
        <Accordion.Panel header="更多信息">
          更多详细内容...
        </Accordion.Panel>
      </Accordion>
    </Card.Body>
  </Card>
</div>

);
};


2. 表单验证示例：

import { Form, Input, Button, Toast } from ‘antd-mobile’;

const LoginForm = () => {
const handleSubmit = (values) => {
if (values.username === ‘’ || values.password === ‘’) {
Toast.fail(‘请输入用户名和密码’);
} else {
// 处理登录逻辑
Toast.success(‘登录成功’);
}
};

return (

<Form.Item name=“username” rules={[{ required: true, message: ‘请输入用户名’ }]}>

</Form.Item>
<Form.Item name=“password” rules={[{ required: true, message: ‘请输入密码’ }]}>

</Form.Item>
登录

);
};


3. 导航菜单和路由管理示例：

import { BrowserRouter as Router, Route, Link } from ‘react-router-dom’;
import { TabBar } from ‘antd-mobile’;

const HomePage = () => {
return

主页内容

;
};

const ProfilePage = () => {
return

个人中心内容

;
};

const App = () => {
const [selectedTab, setSelectedTab] = useState(‘home’);

return (

<div style={{ position: ‘fixed’, height: ‘100%’, width: ‘100%’, top: 0 }}>

<TabBar.Item
title=“首页”
key=“home”
selected={selectedTab === ‘home’}
onPress={() => setSelectedTab(‘home’)}
>
主页
</TabBar.Item>
<TabBar.Item
title=“个人中心”
key=“profile”
selected={selectedTab === ‘profile’}
onPress={() => setSelectedTab(‘profile’)}
>
个人中心
</TabBar.Item>





);
};


4. 页面布局示例：

import { Card, List } from ‘antd-mobile’;

const DetailPage = () => {
return (

<Card.Header title=“详情页标题” />
<Card.Body>
<List renderHeader={() => ‘基本信息’}>
<List.Item>详情项1</List.Item>
<List.Item>详情项2</List.Item>
<List.Item>详情项3</List.Item>


<Accordion.Panel header=“更多信息”>
更多详细内容…
</Accordion.Panel>

</Card.Body>

);
};


5. 表单输入示例：

import { Form, Input, Checkbox } from ‘antd-mobile’;

const SettingsPage = () => {
return (

<Form.Item name=“username” rules={[{ required: true, message: ‘请输入用户名’ }]}>

如果你也是看准了Python，想自学Python，在这里为大家准备了丰厚的免费学习大礼包，带大家一起学习，给大家剖析Python兼职、就业行情前景的这些事儿。

一、Python所有方向的学习路线

Python所有方向路线就是把Python常用的技术点做整理，形成各个领域的知识点汇总，它的用处就在于，你可以按照上面的知识点去找对应的学习资源，保证自己学得较为全面。

二、学习软件

工欲善其必先利其器。学习Python常用的开发软件都在这里了，给大家节省了很多时间。

三、全套PDF电子书

书籍的好处就在于权威和体系健全，刚开始学习的时候你可以只看视频或者听某个人讲课，但等你学完之后，你觉得你掌握了，这时候建议还是得去看一下书籍，看权威技术书籍也是每个程序员必经之路。

四、入门学习视频

我们在看视频学习的时候，不能光动眼动脑不动手，比较科学的学习方法是在理解之后运用它们，这时候练手项目就很适合了。

四、实战案例

光学理论是没用的，要学会跟着一起敲，要动手实操，才能将自己的所学运用到实际当中去，这时候可以搞点实战案例来学习。

五、面试资料

我们学习Python必然是为了找到高薪的工作，下面这些面试题是来自阿里、腾讯、字节等一线互联网大厂最新的面试资料，并且有阿里大佬给出了权威的解答，刷完这一套面试资料相信大家都能找到满意的工作。

成为一个Python程序员专家或许需要花费数年时间，但是打下坚实的基础只要几周就可以，如果你按照我提供的学习路线以及资料有意识地去实践，你就有很大可能成功！
最后祝你好运！！！

网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。

需要这份系统化学习资料的朋友，可以戳这里无偿获取

一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！

2401_84584628
关注
  • 13
    点赞
  • 踩
  • 17
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
前端开发基础（5）React
羽墨灵丘的博客
07-12 920
react 开发的基础知识
【开发】前端工程——ReactJS
努力，奋斗！
03-13 1850
ReactJS:前端开发四个阶段，ReactJS语法，JSX，组件，Model，React框架分类 AntDesign：antd，Tabs，布局，导航菜单，表格 AntDesign Pro：部署和安装，菜单和路由，新增页面，Pro中model执行流程
React 开发一个移动端项目（1）
wbskb的博客
09-09 1414
react移动端项目（1）- react 常用技术栈、如何搭建一个 react 项目 、yarn 的基本使用、如何调整目录结构、Gitee/ Git 的基本使用
React入门实战：移动设备兼容性处理
AI架构设计之禅
11-15 292
1.背景介绍 最近有很多企业都在对移动设备进行SEO优化，提高网站流量，但是由于市场份额小，移动端浏览器用户占比远低于PC端，因此需要考虑到移动端的兼容性问题。本文主要针对一些前端开发人员经常遇到的移动端兼容性问题，分享下自己对于解决方案的思路和理解，希望能够帮助到读者们。 2.核心概念与联系
React移动端项目-03
m0_73442777的博客
08-03 409
本项目对标CSDN、博客园等竞品，致力成为更加贴近年轻 IT 从业者的科技资讯类应用 产品关键词：IT、极客、活力、科技、技术分享、前沿动态、内容社交 用户特点：年轻有活力，对IT领域前言科技信息充满探索欲和学习热情
react-antd-landing-page:使用React和Ant Design制作的登录页面
05-28
在本项目"react-antd-landing-page"中，开发者利用React和Ant Design库构建了一个功能齐全的登录页面。Ant Design是流行的UI框架，为React应用提供了丰富的组件和样式，简化了前端开发工作。以下是关于这个项目及其...
基于antd-mobile和ant-design-pro开发的react 移动项目.zip
最新发布
04-06
【标题】"基于antd-mobile和ant-design-pro开发的react 移动项目.zip" 提供了关于使用Ant Design Mobile和Ant Design Pro构建React移动应用的重要信息。Ant Design是阿里巴巴开源的一套优秀的前端UI解决方案，它提供...
ant-design-mobile-rn：用于React Native的Ant设计
02-01
English |蚂蚁设计移动RN 可配置的Mobile UI规范和基于React的实现。产品特点遵循Ant Design Mobile UI规范。 不同产品的可配置UI样式。 支持基于React Native的Web和本机用法。 用TypeScript开发。演示版# clonegit...
R-Design:基于 react native 和 Ant Design Mobile 的移动端UI组件设计库
05-18
R-Design 是基于react native 和 antd-mobile的移动端RN UI Widget。 特性 基于 React Native 的多平台支持。 自由的视觉样式配置，适应各类产品风格。 提供类型定义文件index.d.ts,一看便知如何使用,方便自动提示。...
react-ant-admin：使用ant-design react react-hook ts开发的类ant-design-pro管理后台，具有完整的权限系统和配套的node + ts的api
02-05
最开始的时候，我需要一个react开发的amdin模版，在开源社区寻找了一边之后，比较中意ant design pro的UI ，当我一堆操作把ant desgin pro desgin ant desgin pro的代码拉下来研究之后，发现内容是在太多了，除了...
react单页面项目实例
05-08
react单页面项目实例，有简单的路由配置和webpack配置
Hello React （创建自己的第一个React 页面）
cvvvvvvvvvv的博客
11-05 2160
Rract是啥？ React 是用于构建用户界面的 JavaScript 库 构建用户界面. User Interface，对咱们前端来说，简单理解为：HTML 页面 javscrtipt库。不是框架，是库， react 全家桶才是框架 react 全家桶： react: 核心库 react-dom: dom操作 react-router：路由, redux：集中状态管理 背景 Rract最牛逼！全球使用最多 特点 声明式 用类似于html的语法来定义页面。react中通过数据驱动视图的变
第五篇：【传奇开心果系列】Ant Design Mobile of React移动应用开发：基础页面制作介绍和示例代码
jackchuanqi的博客
01-09 1310
使用Ant Design Mobile of React（AMR）开发移动应用页面，基础页面主要有九种页面。它们是：登录页、注册页、主页、个人中心、列表页、详情页、设置页、搜索页和升级页。这些页面都属于通用页面和构成移动应用的基本页面。这些页面有机整合在一起构成一个手机app应用的基本框架，具有基础作用。
React-Webpack5-TypeScript打造工程化多页面应用
油墨香^-^的博客
03-07 1095
日常工作中大部分场景下我们都是在使用webpack构建传统单页面spa应用。所谓的单页面应用也就是说打包后的代码仅仅生成一份html文件，基于前端路由js去控制渲染不同的页面。当然所谓的多页面应用简单来说也就是打包后生成多个html文件。这篇文章中我们来重点介绍多页面应用，文章中涉及的内容纯干货。我们废话不多说，一篇文章让你彻底搞懂所谓工程化的多页面应用构建。文章中涉及的模板配置可以点击这里查看。star前边部分是基于基础配置从零开始搭建一个的讲解部分，如果这块你已经足够了解了，可以直接跳到。
React移动端项目-01
m0_73442777的博客
08-03 1013
>本项目对标`CSDN`、`博客园`等竞品，致力成为更加贴近年轻 IT 从业者的科技资讯类应用 >产品关键词：IT、极客、活力、科技、技术分享、前沿动态、内容社交 >用户特点：年轻有活力，对IT领域前言科技信息充满探索欲和学习热情
react的H5移动端工具（SPA\MPA都有）
qq_36899949的博客
12-29 1143
自己搞得一个create-react-app 的二次封装模版，能满足大部分H5移动端开发，有需要的可以下下来看看哈，点个star支持一下，也会持续更新。
初学React，制作案例页面1
随书笔记
10-20 866
制作react初级练习页面
【React开发单页面（一）】之开篇及一些概念
科技男
07-29 484
申明：本系列教程由【科技男code】原创，允许转载，但转载必须注明出处并附带首发链接！ 概述 React 介绍 React 是一个用于构建用户界面的 JAVASCRIPT 库。 React主要用于构建UI，很多人认为 React 是 MVC 中的 V（视图）。 React 起源于 Facebook 的内部项目，用来架设 Instagram 的网站，并于 2013 年 5 ...
AntDesign React开发指南：快速入门与实战组件详解
AntDesign学习手册是一份全面的指南，专为基于React的Web前端应用程序开发人员设计，旨在帮助用户快速理解和上手Ant Design这套强大的UI组件库。该手册由张镇编写，共分为两个主要部分：指引和组件。 在指引部分，...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值