本教程使用【侧滑组件】 + 【模态层】 实现侧滑显示消息列表并且点击显示消息详情。
模态层基础传送门:https://blog.csdn.net/qq934235475/article/details/82145119
废话不多说,先来效果图 【侧滑的组件效果比较简陋,当然亦可是酷炫的页面(类似qq侧滑等)】:
组件介绍
安装组件:
npm install react-native-side-menu --save
引入组件:
import SideMenu from 'react-native-side-menu';
组件属性:
属性 | 默认值 | 类型 | 描述 |
---|---|---|---|
menu | inherited | React.Component | 内容组件,可以包含一个自定义的组件,用于显示 |
isOpen | false | Boolean | 抽屉是否打开 |
openMenuOffset | 屏幕2/3 | Number | 抽屉打开时,占距屏幕的宽度 |
hiddenMenuOffset | none | Number | 抽屉关闭后,残留占距屏幕的宽度 |
edgeHitWidth | none | Number | 多远距离滑动可以拉出组件,默认距离60 |
toleranceX | none | Number | X 轴偏移量 |
toleranceY | none | Number | Y 轴偏移量 |
disableGestures | false | Bool | 是否关闭手势滑动 |
onStartShould SetResponderCapture | none | Function | 指定抽屉是否对触摸作出反应,详细请前往https://facebook.github.io/react-native/docs/gesture-responder-system.html |
onChange | none | Function | 抽屉打开/关闭时的回调函数 |
onMove | none | Function | 抽屉拉出时的回调函数,参数为距离,在左为正,在右为负,参考X坐标轴 |
onSliding | none | Function | 当抽屉滑动时,返回滑动距离在 hiddenMenuOffset 和 openMenuOffset 之间的百分比 |
menuPosition | left | String | 抽屉显示位置,左侧(left)或者右侧(right) |
animationFunction | none | (Function -> Object) | 函数接受两个参数(prop, value) 并返回一个对象 - prop 指定要动画的参数的位置使用- value 最终值 |
animationStyle | none | (Function -> Object) | 接受一个参数(值)并返回一个对象的函数: -你应该在你需要动画参数的地方使用的值(内容视图的左偏移量) |
bounceBackOnOverdraw | true | boolean | 当属性为true时,拉动抽屉到openMenuOffset设置的最大值后,会有回弹效果 |
autoClosing | true | boolean | 当属性为true时,抽屉会在事件发生时自动关闭 |
代码实现:
constructor(props) {
super(props);
this._rightAction = this._rightAction.bind(this);
this._closeSideMenu = this._closeSideMenu.bind(this);
this.state = {
isOpen: false,
flag:false,
}
}
_rightAction() {
this.setState({isOpen: !this.state.isOpen});
}
_closeSideMenu(){
const isOpen = this.state.isOpen;
const flag = this.state.flag;
if (isOpen && flag)
this.setState({isOpen: false, flag: false});
else if (!isOpen && !flag) {
} else {
this.setState({flag: true});
}
}
render() {
const menu = <BoardList/>;
return (
<SideMenu
menu={menu}
openMenuOffset={(WINDOW_WIDTH/5)*4}
menuPosition="right"
isOpen={this.state.isOpen}
onChange={this._closeSideMenu}
>
<BaseCommonList
navigator={this.props.navigator}
title={'我的消息'}
goBack={false}
showSearchBar={true}
pageType={'LbBaseMessageUserList'}
renderRowExt={this._renderRowExt}
rightAction={this._rightAction}
rightActionTitle={"公告"}
onPress={this._onPress}
param={{showStepNumber: false, pageType: 'LbBaseMessageUserList'}}
/>
</SideMenu>
);
}
其中 <BaseCommonList/>是一个自定义的列表组件,基于<ListView/>开发,你当然可以把他换成其他组件。
使用
<SideMenu>
<BaseCommonList/>
<SideMenu/>
包含,则此组件(<BaseCommonList/>)就有了一个侧滑的界面(<SideMenu>)。其次,menuData是一个自定义的公告列表,赋值给<SideMenu>组件的属性menu中,即侧滑显示的界面。
BUG延伸:
1,侧滑关闭后,再次回到该 TabBar (消息) 会自动弹出。
造成原因:在这里,增加了一个右上角的“公告”按钮,使其既可以侧滑显示,也可以点击公告按钮显示(通常允许侧滑即可,这里是业务需求)。这时,你使用手势侧滑,关闭没有任何影响,当你点击“公告”按钮显示侧滑后,再点击左侧空白区域关闭,切换TabBar再次进入,则会自动显示侧滑区域。因为点击公告按钮,需要以一个isOpen来进行控制。即点击公告后,isOpen为true,点击左侧空白区域后,并没有置回false,则再次进到该TabBar则会自动显示侧滑。
解决方案:本文代码已经给出解决方案,请参考<SideMenu/>中的onChange方法,即this._closeSideMenu()方法。思路为,在页面初始化时,设置isOpen与flag属性为false,此时,点击“公告”按钮,触发onChange方法,isOpen与flag均为true,点击左侧空白区域返回时,再次触发onChange方法,此时,isOpen与flag均置为false,故从其他界面过来时,不会再自动显示侧滑区域。bingo~
PS:
A,一般来说,侧滑组件位于最左侧TabBar或者最右侧TabBar,否则如果TabBar也可以滑动,会影响用户体验,此处为业务需求。
B,欢迎提出问题一起探讨,共同成长!