React 的antd-mobile 组件库,嵌套路由

简介: React 的antd-mobile 组件库,嵌套路由

React 的antd-mobile 组件库(★★★)

介绍与使用
  • antd-mobileAnt Design 的移动规范的 React 实现,服务于蚂蚁及口碑无线业务。
特性
  • UI 样式高度可配置,拓展性更强,轻松适应各类产品风格
  • 基于 React Native 的 iOS / Android / Web 多平台支持,组件丰富、能全面覆盖各类场景 (antd-mobile-rn)
  • 提供 “组件按需加载” / “Web 页面高清显示” / “SVG Icon” 等优化方案,一体式开发
  • 使用 TypeScript 开发,提供类型定义文件,支持类型及属性智能提示,方便业务开发
  • 全面兼容 react / preact
适用场景
  • 适合于中大型产品应用
  • 适合于基于 react / preact / react-native 的多终端应用
  • 适合不同 UI 风格的高度定制需求的应用
快速上手
  • 创建一个项目
  • 安装
  • npm install antd-mobile --save
  • 使用
  • 导入组件
  • 导入样式
// 导入组件
import { Button } from 'antd-mobile';
// 导入样式
import 'antd-mobile/dist/antd-mobile.css';  // or 'antd-mobile/dist/antd-mobile.less'
ReactDOM.render(<Button>Start</Button>, mountNode);

配置路由

  • 安装 yarn add react-router-dom
  • 导入路由组件:Router / Route / Link

外观和样式调整

  • 修改页面标题,在index.html里面修改
  • 基础样式调整,在index.css 中调整

项目整体布局

嵌套路由(★★★)

  • 嵌套路由:路由内部包含路由
  • 用Home组件表示父路由的内容
  • 用News组件表示子路由的内容
使用步骤
  • 在pages文件夹中创建News/index.js 组件
  • 在Home组件中,添加一个Route作为子路由的出口
  • 设置嵌套路由的path,格式以父路由path开头(父组件展示了,子组件才会展示)
  • 修改pathname为 /home/news,News组件的内容就会展示在Home组件中了

实现TabBar(★★★)

拷贝TabBar组件结构
  • 打开 antd-mobile 组件库中TabBar的组件文档
  • 选择APP型选项卡菜单,点击 </>显示源码
  • 拷贝核心代码到 Home 组件中(Home是父路由组件)
  • 调整代码
修改TabBar组件样式
  • 修改TabBar菜单项文字标题
  • TabBar的文字标题在TabBar.Item 的title属性中,所以我们修改对应四个title属性即可
<TabBar.Item
    title="首页"
    ...
>
</TabBar.Item>
<TabBar.Item
    title="找房"
    ...
>
</TabBar.Item>
<TabBar.Item
    title="咨询"
    ...
>
</TabBar.Item>
<TabBar.Item
    title="我的"
    ...
>
</TabBar.Item>
  • 修改TabBar菜单文字标题颜色
  • TabBar菜单选中的文字颜色在 TabBar的 tintColor 属性中设置
  • 未选中文字颜色用默认的即可,删除 TabBar中的 unselectedTintColor 属性
<TabBar
    tintColor="#21b97a"
    barTintColor="white"
>
...
</TabBar>
  • 使用字图图标,修改TabBar菜单的图标
  • 字体图标的 资源在课件的素材中,直接复制过来即可
  • 在 index.js里面引入字体图标的 css样式文件,这样我们只需要在组件中设置对应的类名即可,icon代表是默认图标,selectedIcon代表是选中的图标
<TabBar.Item
    {/*默认的图标*/}
    icon={
        <i className="iconfont icon-ind"></i>
    }
     {/*选中图标*/}
    selectedIcon={<i className="iconfont icon-ind"></i>
    }
    ...
>
</TabBar.Item>
<TabBar.Item
    icon={
        <i className="iconfont icon-findHouse"></i>
    }
    selectedIcon={
        <i className="iconfont icon-findHouse"></i>
    }
    ...
>
</TabBar.Item>
<TabBar.Item
    icon={
        <i className="iconfont icon-infom"></i>
    }
    selectedIcon={
        <i className="iconfont icon-infom"></i>
    }
    ...
>
</TabBar.Item>
<TabBar.Item
    icon={
        <i className="iconfont icon-my"></i>
    }
    selectedIcon={<i className="iconfont icon-my"></i>}
    ...
>
</TabBar.Item>
  • 修改TabBar菜单项的图标大小
  • 在当前组件对应文件夹中创建index.css文件,修改一下字体图标的大小,设置为20px(注意,在home.js中记得导入当前的样式)
  • 调整TabBar的位置,固定在最底部
  • 通过调试工具我们发现,底部的TabBar的类名叫 am-tab-bar-bar,所以我们只需要设置一下这个类名的属性即可
  • 去掉TabBar的徽章
  • 找到TabBar.Item里面对应的 badge 属性,删除即可
TabBar配合路由实现
  • 根据TabBar组件文档设置不渲染内容(只保留菜单项,不显示内容)
  • 给TabBar设置 noRenderContent 属性即可
<TabBar
    ...
    noRenderContent = "true"
>
  • 给TabBar.Item 绑定点击事件,在点击事件逻辑里面利用编程式导航,进行路由的切换
  • 利用 this.props.history,push() 来实现
<TabBar.Item
    ...
    onPress={() => {
        this.setState({
            selectedTab: 'blueTab',
        });
        {/* 切换路由 */}
        this.props.history.push('/home/index')
    }}
>
</TabBar.Item>
<TabBar.Item
    ...
    onPress={() => {
        this.setState({
            selectedTab: 'redTab',
        });
        this.props.history.push('/home/list')
    }}
>
</TabBar.Item>
<TabBar.Item
    ...
    onPress={() => {
        this.setState({
            selectedTab: 'greenTab',
        });
        this.props.history.push('/home/news')
    }}
>
</TabBar.Item>
<TabBar.Item
    ...
    onPress={() => {
        this.setState({
            selectedTab: 'yellowTab',
        });
        this.props.history.push('/home/profile')
    }}
>
</TabBar.Item>
  • 创建TabBar组件菜单项对应的其他3个组件,并在Home组件中配置路由信息
  • 创建对应的组件,然后在 home.js中进行导入,最后配置一下路由
{/* 配置路由信息 */}
<Route path="/home/index" component={Index}></Route>
<Route path="/home/list" component={HouseList}></Route>
<Route path="/home/news" component={News}></Route>
<Route path="/home/profile" component={Profile}></Route>
  • 给菜单项添加selected属性,设置当前匹配的菜单项高亮
  • 通过 this.props.location.pathname 就能拿到当前的路由的path
  • 在TabBarItem里面设置 selected的属性,判断是否等于当前的pathname
  • 在state中记录当前的pathname
state = {
     // 选中的菜单项,记录当前的pathname来匹配对应的tab
     selectedTab: this.props.location.pathname,
 }
  • 在每个TabBar.Item里面利用selected属性判断一下
<TabBar.Item
     selected={this.state.selectedTab === '/home/index'}
     onPress={() => {
         this.setState({
             selectedTab: '/home/index',
         });
         this.props.history.push('/home/index')
     }}
     ...
 >
 </TabBar.Item>
 <TabBar.Item
     selected={this.state.selectedTab === '/home/list'}
     onPress={() => {
         this.setState({
             selectedTab: '/home/list',
         });
         this.props.history.push('/home/list')
     }}
     ...
 >
 </TabBar.Item>
 <TabBar.Item
     selected={this.state.selectedTab === '/home/news'}
     onPress={() => {
         this.setState({
             selectedTab: '/home/news',
         });
         this.props.history.push('/home/news')
     }}
     ...
 >
 </TabBar.Item>
 <TabBar.Item
     selected={this.state.selectedTab === '/home/profile'}
     onPress={() => {
         this.setState({
             selectedTab: '/home/profile',
         });
         this.props.history.push('/home/profile')
     }}
     ...
 >
 </TabBar.Item>
TabBar代码的重构
  • 发现TabBar的Iitem里面的内容几乎是一致的,只是里面内容不同
  • 所以我们可以封装一下
  • 提供菜单数据
  • 使用map来进行遍历

声明一下数据源

const tabItems = [{
    title: '首页',
    icon: 'icon-ind',
    path: '/home/index'
},
{
    title: '找房',
    icon: 'icon-findHouse',
    path: '/home/list'
},
{
    title: '资讯',
    icon: 'icon-infom',
    path: '/home/news'
},
{
    title: '我的',
    icon: 'icon-my',
    path: '/home/profile'
}]

封装一个函数来遍历渲染

renderTabBarItem() {
   return tabItems.map(item => {
        return (
            <TabBar.Item
                title={item.title}
                key={item.title}
                icon={
                    <i className={`iconfont ${item.icon}`}></i>
                }
                selectedIcon={<i className={`iconfont ${item.icon}`}></i>
                }
                selected={this.state.selectedTab === item.path}
                onPress={() => {
                    this.setState({
                        selectedTab: item.path,
                    });
                    this.props.history.push(item.path)
                }}
            >
            </TabBar.Item>
        )
    })
}

在render方法中调用即可

render() {
    return (<div>
        {/* 配置路由信息 */}
        <Route path="/home/index" component={Index}></Route>
        <Route path="/home/list" component={HouseList}></Route>
        <Route path="/home/news" component={News}></Route>
        <Route path="/home/profile" component={Profile}></Route>
        {/* 底部导航栏 */}
        <TabBar
            tintColor="#21b97a"
            barTintColor="white"
            noRenderContent="true"
        >
            {this.renderTabBarItem()}
        </TabBar>
    </div>)
}

首页实现(★★★)

  • 首页的路由是需要去处理的
  • 修改首页路由的配置: /home(去掉后面的index);这里需要添加 exact属性
  • 如果是默认路由需要跳转到 /home
{/* 配置默认路由 */}
<Route path="/" exact render={() => <Redirect to="/home"></Redirect>}></Route>

加粗样式

目录
相关文章
|
1月前
|
前端开发
react按需引入antd-mobile
react按需引入antd-mobile
22 0
|
2月前
|
前端开发 JavaScript
React和Vue实现路由懒加载
React和Vue实现路由懒加载
23 2
|
2月前
|
前端开发
如何使用react-router v6快速搭建路由?
如何使用react-router v6快速搭建路由?
43 0
|
22天前
|
前端开发 Android开发 iOS开发
应用研发平台EMAS使用 aliyun-react-native-push 库接入推送和辅助通道,推送都可以收到,但是在App切到后台或者杀掉进程之后就收不到推送了,是需要配置什么吗?
【2月更文挑战第31天】应用研发平台EMAS使用 aliyun-react-native-push 库接入推送和辅助通道,推送都可以收到,但是在App切到后台或者杀掉进程之后就收不到推送了,是需要配置什么吗?
20 2
|
2月前
|
前端开发 中间件 数据安全/隐私保护
React路由进阶方法
React路由进阶方法
25 1
|
2月前
|
存储 前端开发 中间件
React组件间的通信
React组件间的通信
15 1
|
2月前
|
JavaScript 前端开发 网络安全
vue与react路由拦截
vue与react路由拦截
26 4
|
2月前
|
前端开发 应用服务中间件 数据库
react服务端组件
react服务端组件
19 0
|
2月前
|
前端开发 JavaScript
快速上手React:从概述到组件与事件处理
快速上手React:从概述到组件与事件处理
|
3月前
|
设计模式 前端开发 数据可视化
【第4期】一文了解React UI 组件库
【第4期】一文了解React UI 组件库
78 0