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

本文链接：https://blog.csdn.net/2401_84584609/article/details/138425498

本文介绍了如何使用Ant Design Mobile of React（AMR）开发移动应用的基础页面，包括登录、注册、主页、个人中心等。通过React Router实现页面跳转，使用AMR组件构建页面布局和表单验证，提供了示例代码和关键知识点总结。

摘要由CSDN通过智能技术生成

登录页示例代码：

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

const LoginForm = () => {
  const handleSubmit = (values) => {
    // 处理登录逻辑
    if (values.username === 'admin' && values.password === '123456') {
      Toast.success('登录成功');
    } else {
      Toast.fail('用户名或密码错误');
    }
  };

  return (
    <Form onFinish={handleSubmit}>
      <Form.Item name="username" rules={[{ required: true, message: '请输入用户名' }]}>
        <Input placeholder="用户名" />
      </Form.Item>
      <Form.Item name="password" rules={[{ required: true, message: '请输入密码' }]}>
        <Input type="password" placeholder="密码" />
      </Form.Item>
      <Button type="primary" htmlType="submit">登录</Button>
    </Form>
  );
};

在这里插入图片描述
2. 注册页示例代码：

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

const RegisterForm = () => {
  const handleSubmit = (values) => {
    // 处理注册逻辑
    if (values.password === values.confirmPassword) {
      Toast.success('注册成功');
    } else {
      Toast.fail('两次输入的密码不一致');
    }
  };

  return (
    <Form onFinish={handleSubmit}>
      <Form.Item name="username" rules={[{ required: true, message: '请输入用户名' }]}>
        <Input placeholder="用户名" />
      </Form.Item>
      <Form.Item name="password" rules={[{ required: true, message: '请输入密码' }]}>
        <Input type="password" placeholder="密码" />
      </Form.Item>
      <Form.Item name="confirmPassword" rules={[{ required: true, message: '请确认密码' }]}>
        <Input type="password" placeholder="确认密码" />
      </Form.Item>
      <Button type="primary" htmlType="submit">注册</Button>
    </Form>
  );
};

在这里插入图片描述
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 tabBarPosition="bottom">
        <TabBar.Item
          title="首页"
          key="home"
          selected={selectedTab === 'home'}
          onPress={() => setSelectedTab('home')}
        >
          {/* 主页内容 */}
        </TabBar.Item>
        {/* 其他TabBar.Item */}
      </TabBar>
    </div>
  );
};

在这里插入图片描述
4. 个人中心示例代码：

import { List } from 'antd-mobile';

const ProfilePage =