【React-native】側滑元件 React-native-side-menu 的使用
本教程使用【側滑元件】 + 【模態層】 實現側滑顯示訊息列表並且點選顯示訊息詳情。
廢話不多說,先來效果圖 【側滑的元件效果比較簡陋,當然亦可是酷炫的頁面(類似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 | 是否關閉手勢滑動 |
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,歡迎提出問題一起探討,共同成長!