本文共 4478 字，大约阅读时间需要 14 分钟。

react-native-swipe-list-view 是一个具有侧滑功能的react-native的listview组件

此组件由两个子组件组成：
<SwipeListView> 是基于listview封装的具有侧滑打开、关闭功能的listview组件，具有一些原生功能行为；例如：当某一行侧滑打开后，在listview滚动或侧滑打开其他行时，会自动关闭此行。

如果你只是想拥有具有侧滑功能的row，那么你可以使用提供的<SwipeRow>这个组件，它同样具有侧滑功能。

例子：

ios

android

安装

npm install --save react-native-swipe-list-view
或yarn add react-native-swipe-list-view

运行示例

在项目的 ./SwipeListExample目录下是以上示例运行效果，运行操作如下：

• git clone https://github.com/jemise111/react-native-swipe-list-view.git
• cd react-native-swipe-list-view
• cd SwipeListExample
• npm install
• react-native run-ios | react-native run-android

用法

import { SwipeListView } from 'react-native-swipe-list-view';render() {    const ds = new ListView.DataSource({
   rowHasChanged: (r1, r2) => r1 !== r2});    return (        
   
     (                
                        
     
      I am {data} in a SwipeListView
                     
                )}            renderHiddenRow={ data => (                
                        
     
      Left
                         
     
      Right
                     
                )}            leftOpenValue={75}            rightOpenValue={-75}        />    )}
   

参考 example.js 去学习全部的使用的方法（包括 <SwipeRow> 的用法）

注意

如果你的row 是可点击的（如：TouchableOpacity, TouchableHightlight等等），建议把此类组件放在最外层；

建议：

renderRow={ data => (    
           
                
     
      I am {data} in a SwipeListView
             
        
   )}

不建议：

renderRow={ data => (    
           
                
     
      I am {data} in a SwipeListView
             
        
   )}

手动关闭rows

在使用的时候如果需要 关闭row，可以使用以下方法调用closeRow()方法关闭row：

   
     {        
    
      rowMap[`${secId}${rowId}`].closeRow() }>            
     
      I close the row
             
        }}/>
   

rowMap是一个object,结构如下：

{    row_hash_1: ref_to_row_1,    row_hash_2: ref_to_row_2}

每一个row_hash是一个<section_id><row_id>结构的字符串

如果你使用的是一个单独的<SwipeRow>，你一个通过定义ref去调用closeRow()关闭row

Per row behavior

perRowBehavior.gif

如果你需要以上的效果，某些row可以侧滑，而某些不可以滑动，可以在renderRow方法返回<SwipeRow>，请参阅下面的示例和API文档，了解如何实现自定义<SwipeRow>。在example.js中还有一个完整的例子。

以下参数可以作为<SwipeRow>的属性被调用：

• leftOpenValue
• rightOpenValue
• stopLeftSwipe
• stopRightSwipe
• closeOnRowPress
• disableLeftSwipe
• disableRightSwipe
• recalculateHiddenLayout

import { SwipeListView, SwipeRow } from 'react-native-swipe-list-view';
   
     (        
                
                     
      
       Left Hidden
                      
      
       Right Hidden
                  
                 
                     
      
       Row front | {data}
                  
             
        )}/>
   

API

SwipeListView(component)

SwipeRow(component)

当使用<SwipeRow>时，你必须给<SwipeRow>传递两个元素，第一个将在第二个后面渲染，e.g:

以上内容是参考翻译的（谷歌翻译水准，，，），如有不对之处，请指正，我会及时更新

转载地址：http://tpeni.baihongyu.com/