如何使列表视图（反原生）刷卡功能？

Question

我有物品清单。我使用的是ListView，我需要通过向左或向右滑动来删除任何行。

从哪里可以从这里开始？

Answer 1

如果您愿意，请按照this guide使用React Native Swipeout。

否则，这里是我的SwipeList和SwipeListRow组件。我部分使用我的图书馆Cairn的造型，但它应该很容易地转换成普通样式表做出反应，如果你愿意这样做的：

SwipeList.js

import React from 'react'; 
import { Text, ListView } from 'react-native'; 
import styleContext from 'app/style'; 

const style = styleContext.extend({ 
    listViewSection: { 
     paddingVertical: 10, 
     paddingLeft: 15, 
     backgroundColor: '$greyDefault' 
    }, 

    'text.listViewSection': { 
     color: '$greyMid', 
     fontSize: 16, 
     marginLeft: 5 
    } 
}); 

function SwipeList({ dataSource, renderRow }) { 
    function renderSectionHeader(sectionData, sectionId) { 
     return (
      <View {...style('listViewSection')}> 
       <Text {...style('text.listViewSection')}>{sectionId.toUpperCase()}</Text> 
      </View> 
     ); 
    } 

    if (!dataSource.rowIdentities.length) { 
     return (
      <Text>No items found.</Text> 
     ); 
    } 

    return (
     <ListView 
      dataSource={dataSource} 
      automaticallyAdjustContentInsets={false} 
      directionalLockEnabled 
      keyboardShouldPersistTaps={false} 
      keyboardDismissMode={'on-drag'} 
      renderSectionHeader={renderSectionHeader} 
      renderRow={renderRow} /> 
    ); 
} 

SwipeList.propTypes = { 
    dataSource: React.PropTypes.shape({ 
     rowIdentities: React.PropTypes.array.isRequired 
    }).isRequired, 
    renderRow: React.PropTypes.func.isRequired 
}; 

export default SwipeList; 

---

SwipeListRow.js

import React from 'react'; 
import { 
    View, 
    Text, 
    ScrollView, 
    Animated, 
    Dimensions 
} from 'react-native'; 

import styleContext from 'app/style'; 

const { width } = Dimensions.get('window'); 
const style = styleContext.extend({ 
    swipeMessage: { 
     position: 'absolute', 
     top: 0, 
     height: 75, 
     justifyContent: 'center', 
     alignItems: 'center' 
    }, 

    itemContainer: { 
     width 
    } 
}); 

const WHITE = 0; 
const GREEN = 1; 
const AnimatedScrollView = Animated.createAnimatedComponent(ScrollView); 

class SwipeListRow extends React.Component { 
    constructor(props) { 
     super(props); 

     this.state = { 
      color: new Animated.Value(WHITE) 
     }; 
    } 

    animateScroll = (e) => { 
     const threshold = width/5; 
     let x = e.nativeEvent.contentOffset.x; 
     let swiped = null; 

     x = x * -1; 

     if (x > -50 && this.swiped !== WHITE) { 
      swiped = WHITE; 
     } else if (x < -50 && x > -threshold && this.swiped !== GREEN) { 
      swiped = GREEN; 
     } 

     if (swiped !== null) { 
      this.swiped = swiped; 

      Animated.timing(this.state.color, { 
       toValue: swiped, 
       duration: 200 
      }).start(); 
     } 
    } 

    takeAction =() => { 
     if (this.swiped) { 
      Animated.timing(this.state.color, { 
       toValue: WHITE, 
       duration: 200 
      }).start(); 

      this.props.onSwipe(); 
     } 
    } 

    render() { 
     const { swipeEnabled, swipeMessage, children } = this.props; 
     const bgColor = this.state.color.interpolate({ 
      inputRange: [ 
       WHITE, 
       GREEN 
      ], 
      outputRange: [ 
       'rgb(255, 255, 255)', 
       'rgb(123, 204, 40)' 
      ] 
     }); 

     return (
      <View> 
       <AnimatedScrollView 
        horizontal 
        directionalLockEnabled 
        automaticallyAdjustContentInsets={false} 
        onScroll={this.animateScroll} 
        scrollEventThrottle={16} 
        scrollEnabled={swipeEnabled} 
        onMomentumScrollBegin={this.takeAction} 
        style={[{ flex: 1 }, { backgroundColor: bgColor }]}> 
        <View> 
         <View {...style('itemContainer')}> 
          {children} 
         </View> 
         <View 
          {...style(
           'swipeMessage', 
           [{ width: width/5, right: -width/5 - 20 }] 
          )}> 
          <Text {...style('text.bold text.white')}>{swipeMessage}</Text> 
         </View> 
        </View> 
       </AnimatedScrollView> 
      </View> 
     ); 
    } 
} 

SwipeListRow.propTypes = { 
    children: React.PropTypes.node.isRequired, 
    onSwipe: React.PropTypes.func.isRequired, 
    swipeEnabled: React.PropTypes.bool.isRequired, 
    swipeMessage: React.PropTypes.string.isRequired 
}; 


export default SwipeListRow; 

使用这些组件，现在您只需将所需数据源传递到正常列表视图即可，如ListView component documentation上所述。

<SwipeList 
     dataSource={dataSource} 
     renderRow={(item) => (
      <SwipeListRow 
       key={item.id} 
       swipeMessage={'Delete Item'} 
       onSwipe={() => deleteItem(item)} 
       swipeEnabled={true}> 
       <<< INSERT DISPLAY OF ROW HERE >>> 
      </SwipeListRow> 
     )} /> 

Answer 2

使用这一个

react-native-swipe-list-view

这个作品真的很好，你可以扩展到任何东西。