React 的antd-mobile 组件库（★★★）
介绍与使用
antd-mobile 是 Ant 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.Itemtitle="首页" ... ></TabBar.Item><TabBar.Itemtitle="找房" ... ></TabBar.Item><TabBar.Itemtitle="咨询" ... ></TabBar.Item><TabBar.Itemtitle="我的" ... ></TabBar.Item>
修改TabBar菜单文字标题颜色
TabBar菜单选中的文字颜色在 TabBar的 tintColor 属性中设置
未选中文字颜色用默认的即可，删除 TabBar中的 unselectedTintColor 属性
<TabBartintColor="#21b97a"barTintColor="white">... </TabBar>
使用字图图标，修改TabBar菜单的图标
字体图标的 资源在课件的素材中，直接复制过来即可
在 index.js里面引入字体图标的 css样式文件，这样我们只需要在组件中设置对应的类名即可,icon代表是默认图标，selectedIcon代表是选中的图标
<TabBar.Item {/*默认的图标*/} icon={ <iclassName="iconfont icon-ind"></i> } {/*选中图标*/} selectedIcon={<iclassName="iconfont icon-ind"></i> } ... ></TabBar.Item><TabBar.Itemicon={ <iclassName="iconfont icon-findHouse"></i> } selectedIcon={ <iclassName="iconfont icon-findHouse"></i> } ... ></TabBar.Item><TabBar.Itemicon={ <iclassName="iconfont icon-infom"></i> } selectedIcon={ <iclassName="iconfont icon-infom"></i> } ... ></TabBar.Item><TabBar.Itemicon={ <iclassName="iconfont icon-my"></i> } selectedIcon={<iclassName="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中进行导入，最后配置一下路由
{/* 配置路由信息 */} <Routepath="/home/index"component={Index}></Route><Routepath="/home/list"component={HouseList}></Route><Routepath="/home/news"component={News}></Route><Routepath="/home/profile"component={Profile}></Route>
给菜单项添加selected属性，设置当前匹配的菜单项高亮
通过 this.props.location.pathname 就能拿到当前的路由的path
在TabBarItem里面设置 selected的属性，判断是否等于当前的pathname
在state中记录当前的pathname
state= { // 选中的菜单项,记录当前的pathname来匹配对应的tabselectedTab: this.props.location.pathname, }
在每个TabBar.Item里面利用selected属性判断一下
<TabBar.Itemselected={this.state.selectedTab==='/home/index'} onPress={() => { this.setState({ selectedTab: '/home/index', }); this.props.history.push('/home/index') }} ... ></TabBar.Item><TabBar.Itemselected={this.state.selectedTab==='/home/list'} onPress={() => { this.setState({ selectedTab: '/home/list', }); this.props.history.push('/home/list') }} ... ></TabBar.Item><TabBar.Itemselected={this.state.selectedTab==='/home/news'} onPress={() => { this.setState({ selectedTab: '/home/news', }); this.props.history.push('/home/news') }} ... ></TabBar.Item><TabBar.Itemselected={this.state.selectedTab==='/home/profile'} onPress={() => { this.setState({ selectedTab: '/home/profile', }); this.props.history.push('/home/profile') }} ... ></TabBar.Item>
TabBar代码的重构
发现TabBar的Iitem里面的内容几乎是一致的，只是里面内容不同
所以我们可以封装一下
提供菜单数据
使用map来进行遍历
声明一下数据源
consttabItems= [{ 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() { returntabItems.map(item=> { return ( <TabBar.Itemtitle={item.title} key={item.title} icon={ <iclassName={`iconfont${item.icon}`}></i> } selectedIcon={<iclassName={`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> {/* 配置路由信息 */} <Routepath="/home/index"component={Index}></Route><Routepath="/home/list"component={HouseList}></Route><Routepath="/home/news"component={News}></Route><Routepath="/home/profile"component={Profile}></Route> {/* 底部导航栏 */} <TabBartintColor="#21b97a"barTintColor="white"noRenderContent="true"> {this.renderTabBarItem()} </TabBar></div>) }
首页实现（★★★）
首页的路由是需要去处理的
修改首页路由的配置： /home(去掉后面的index)；这里需要添加 exact属性
如果是默认路由需要跳转到 /home
{/* 配置默认路由 */} <Routepath="/"exactrender={() =><Redirectto="/home"></Redirect>}></Route>
加粗样式
