React-Native笔记--react-native-swipe-list-view

项目中用到了侧滑组件 react-native-swipe-list-view,简单做个笔记。
npm install --save react-native-swipe-list-view
import { SwipeListView } from ‘react-native-swipe-list-view’;

import { SwipeListView } from 'react-native-swipe-list-view';
 
onRowDidOpen = rowKey => {
    console.log('This row opened', rowKey);
  };
 
  onSwipeValueChange = swipeData => {
    const { key, value } = swipeData; 
  };
 
  closeRow = (rowMap, rowKey) => {
    console.log(' closeRow rowKey:::', rowKey);
    if (rowMap[rowKey]) {
        rowMap[rowKey].closeRow();
    }
  }
 
  String(item.id)}  //关键 手动关闭row
          renderItem={data => (
             console.log('You touched me')}
              style={styles.rowFront}
              underlayColor={'#ECECEC 100%'}
            >
              
                
                
                  
                    {data.item.title}
                  
                
              
            
          )}
          renderHiddenItem={(data, rowMap) => ( //隐藏的Item
            
               {
                  this.setState({ showDetailModal: true, exercise: data.item });
                  this.closeRow(rowMap,String(data.item.id)); 
                }
                }
              >
                
                  Detail
                  
              
            
 
          )}
          leftOpenValue={0}
          rightOpenValue={-76} //左滑时 右侧打开的距离
          previewRowKey={'0'}
          previewOpenValue={-40}
          previewOpenDelay={3000}
          onRowDidOpen={this.onRowDidOpen}
          onSwipeValueChange={this.onSwipeValueChange}
        />

官网

你可能感兴趣的:(前端学习)