Wie macht man Swipe-Funktion auf Listview (reaktiv-native)?

Question

Ich habe eine Liste von Artikeln. Ich verwende ListView für sie und ich brauche jede Zeile löschen zu können, nach links oder rechts wischen.

Wo kann ich von hier aus starten?

Answer 1

Wenn Sie möchten, folgen this guide die React Native Swipeout verwendet.

Ansonsten ist hier mein SwipeList und SwipeListRow Komponente. Ich meine Bibliothek teilweise Cairn für Styling verwenden, aber es sollte sich leicht in einen normalen übersetzt werden Sheet reagieren, wenn Sie, dies zu tun Pflege:

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; 

Mit diesen Komponenten müssen Sie nun nur noch die erforderliche Datenquelle wie in einer normalen Listenansicht übergeben, wie unter ListView component documentation beschrieben.

<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

Verwendung dieses

react-native-swipe-list-view

Das funktioniert wirklich gut und man kann zu etwas skalieren.