[技術博客]利用第三方框架react-native-swipeout實現左右滑動出現按鈕

在以前的開發中，爲了實現用戶不一樣手勢操做可以對應不一樣的功能，咱們考慮使用React-Native的API——PanResponder，實現識別用戶的手勢，實現不一樣的功能。但咱們很快就發現，這樣簡單的實現，無任何反饋的話，用戶很難知道具備這樣的功能。所以，咱們準備實現相似手機QQ消息界面的左滑出現幾個按鈕。使用react-native的第三方框架react-native-swipeout能夠很簡單的實現此功能。

安裝react-native-swipeout

框架的github地址： react-native-swipeout

能夠使用npm install --save react-native-swipeout 或 yarn add react-native-swipeout命令安裝框架

框架的使用

在框架的github項目中，開發者給出以下的示例代碼

import Swipeout from 'react-native-swipeout';

// Buttons
var swipeoutBtns = [
  {
    text: 'Button'
  }
]

// Swipeout component
<Swipeout right={swipeoutBtns}>
  <View>
    <Text>Swipe me left</Text>
  </View>
</Swipeout>

閱讀框架github項目中的文檔，咱們能夠知道框架中實現了Swipeout組件，具備如下屬性（props）

Prop	Type	Optional	Default	Description
autoClose	bool	Yes	false	是否會自動關閉按鈕列表
backgroundColor	string	Yes	'#dbddde'	背景顏色
close	bool	Yes		當前列是否會關閉按鈕
disabled	bool	Yes	false	是否禁用swipeout
left	array	Yes	[]	右滑時出如今左側的按鈕列表
onOpen	func	Yes		(sectionID, rowId, direction: string) => void 按鈕列表開啓會執行的函數
onClose	func	Yes		(sectionID, rowId, direction: string) => void 按鈕列表關閉會執行的函數
right	array	Yes	[]	左滑時出如今右側的按鈕列表
scroll	func	Yes		prevent parent scroll
style	style	Yes		style of the container
sensitivity	number	Yes	50	change the sensitivity of gesture
buttonWidth	number	Yes		each button width

left和right屬性應爲形如[{ text: 'Button' }]的列表，其中支持的屬性以下

Prop	Type	Optional	Default	Description
backgroundColor	string	Yes	'#b6bec0'	按鈕的背景顏色
color	string	Yes	'#ffffff'	字體顏色
component	ReactNode	Yes	null	pass custom component to button
onPress	func	Yes	null	按下後執行的函數
text	string	Yes	'Click Me'	text
type	string	Yes	'default'	default, delete, primary, secondary
underlayColor	string	Yes	null	按時按鈕背景顏色
disabled	bool	Yes	false	是否禁用此按鈕

具體使用代碼

_renderItem = (item) => {
    var BtnsLeft = [{ text: '清空', type: 'delete',  onPress: ()=> console.log('清空列表')}];
    var BtnsRight = [{ text: '刪除', type: 'delete', onPress: ()=>console.log('刪除單行數據')}];

    return(
        <Swipeout
            close={!(this.state.sectionID === 'historylist' && this.state.rowID === Id)}
            right={BtnsRight}
            left={BtnsLeft}
            rowID={Id}
            sectionID='historylist'
            autoClose={true}
            backgroundColor='white'
            onOpen={(sectionId, rowId, direction: string) => {
                this.setState({
                    rowID: rowId,
                    sectionID: sectionId
                });
            }}
            scroll={event => console.log('scroll event') }
          >
        <View style={flatStylesWithAvatar.cell}
        >
        具體內容
        </View>
        </Swipeout>
    )
};

在渲染列表中的單行數據時，左右滑動能夠出現不一樣操做的對應按鈕，實現效果以下：