本教程使用【侧滑组件】 + 【模态层】 实现侧滑显示消息列表并且点击显示消息详情。
模态层基础传送门：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，欢迎提出问题一起探讨，共同成长！