本教程使用【側滑元件】 + 【模態層】 實現側滑顯示訊息列表並且點選顯示訊息詳情。

廢話不多說，先來效果圖 【側滑的元件效果比較簡陋，當然亦可是酷炫的頁面（類似qq側滑等）】：

元件介紹

安裝元件：

npm install react-native-side-menu --save

引入元件：

import SideMenu from 'react-native-side-menu';

元件屬性：

程式碼實現：

    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，歡迎提出問題一起探討，共同成長！