React Native: Erfassen von Swiping-Ereignis in SwipeListView

Question

Ich bin auf der Suche nach einem Ereignis ausgelöst durch Wischen SwipeRow innerhalb SwipeListView links oder rechts.

Das Ziel ist es, Push-Stil-Benachrichtigungen zu haben, die leicht durch Wischen entlassen werden können. Die Benachrichtigung sollte sich allmählich ändern, wenn sie zu links (grün) und rechts (rot) geswiped wird. Nach einem bestimmten Schwellenwert (60) sollte das letzte Ereignis ausgelöst werden, in diesem Fall akzeptieren Sie (links) und () (rechts) und die Benachrichtigung sollte verschwinden.

Momentan wird dies durch Tasten gemacht, die ich entfernen möchte.

Von SwipeListView docummentation könnte dies nützlich sein:

onRowClose - Funktion aufgerufen, wenn eine Swipe-Reihe

geschlossen ist Animieren

onRowOpen - Funktion aufgerufen, wenn eine Swipe-Reihe ist offen Animieren

swipeRowStyle - Objekt mit Stilen für den übergeordneten Wrapper Ansicht des SwipeRow

leftOpenValue - TranslateX numerischen Wert für die Zeile auf der linken Seite (positive Zahl) Öffnung

rightOpenValue - TranslateX numerischen Wert für die Zeile nach rechts Öffnung (negative Zahl)

import React, { Component } from 'react'; 
import { AppRegistry, StyleSheet, Text, View, ListView } from 'react-native'; 
import { SwipeListView, SwipeRow } from 'react-native-swipe-list-view' 
var data = [ { id:0, notification: true, },{ id:1, notification: false, },{ id:2, notification: false, } ]; 

class SampleApp extends Component { 

    render() { 
    var ds = new ListView.DataSource({ rowHasChanged: (row1, row2) => row1 !== row2 }); 
    return (
     <SwipeListView 
     dataSource={ds.cloneWithRows(data)} 
     onRowClose={() => {console.log("list.onRowClose")}} 
     onRowOpen={() => {console.log("list.onRowClose")}} 
     renderRow={ (data, secId, rowId, rowMap) => { 
      return (
      <SwipeRow disableRightSwipe={false} disableLeftSwipe={false} leftOpenValue={60} rightOpenValue={-60} onRowClose={() => {console.log("row.onRowClose")}} onRowOpen={() => {console.log("row.onRowClose")}} swipeRowStyle={{}} leftOpenValue={60} rightOpenValue={-60}> 
       <View style={{flexDirection:'row',justifyContent:'space-between',alignItems:'center', borderWidth:1}}> 
        <Text style={{flex: 1, paddingVertical:50,backgroundColor:'green', left:0, right:0, textAlign: 'left'}}>Accept</Text><Text style={{flex: 1, paddingVertical:50, backgroundColor:'red', left:0, right:0,textAlign:'right'}}>Reject</Text> 
       </View> 
       <View> 
        <Text style={{left:0, right:0, paddingVertical:50,borderWidth:1, backgroundColor:'grey'}}>Notification</Text> 
       </View> 
      </SwipeRow> 
     ); 
     }} 
     /> 
    ); 
    } 
} 
AppRegistry.registerComponent('SampleApp',() => SampleApp); 

Swipe links

Swipe rechts

Answer 1

Hier ist meine Lösung, die die SwipeListView und SwipeRow erstreckt.

Was implementiert ist:

• Swipe links und rechts Event-Handling.
• Farbe der gesamten Zeile Wechsel auf swiping nach links/rechts (grün < -> "transparent" < -> rot)
• machen die Farbübergänge schrittweise (100% grün < -> "transparent" < -> 100% rot)

index.ios.js:

import React, { Component } from 'react'; 
import { AppRegistry, StyleSheet, Text, View, ListView } from 'react-native'; 
var SwipeListViewNotification = require('./SwipeListViewNotification.js').default; 
var SwipeRowNotification = require('./SwipeRowNotification.js').default; 
var data = [ { id:0, notification: true, },{ id:1, notification: false, },{ id:2, notification: false, } ]; 

class SampleApp extends Component { 

    render() { 
    var ds = new ListView.DataSource({ rowHasChanged: (row1, row2) => row1 !== row2 }); 
    return (
     <SwipeListViewNotification 
     dataSource={ds.cloneWithRows(data)} 
     onRowClose={() => {console.log("list.onRowClose")}} 
     onRowOpen={() => {console.log("list.onRowClose")}} 
     renderRow={ (data, secId, rowId, rowMap) => { 
      return (
      <SwipeRowNotification onOpenLeft={() => console.log("ACCEPT")} onOpenRight={() => console.log("REJECT")}> 
       <View></View> 
       <View> 
        <Text style={{left:0, right:0, paddingVertical:50,borderWidth:1, backgroundColor:'grey'}}>Notification</Text> 
       </View> 
      </SwipeRowNotification> 
     ); 
     }} 
     /> 
    ); 
    } 
} 
AppRegistry.registerComponent('SampleApp',() => SampleApp); 

SwipeListViewNotification.js:

'use strict'; 

import React, { 
    PropTypes, 
} from 'react'; 
import { SwipeListView } from 'react-native-swipe-list-view'; 

class SwipeListViewNotification extends SwipeListView { 

    constructor(props) { 
    super(props); 
    } 

    renderRow(rowData, secId, rowId, rowMap) { 
     const Component = this.props.renderRow(rowData, secId, rowId, rowMap); 
     if (Component.type.name === 'SwipeRowNotification') { 
      return React.cloneElement(
       Component, 
       { 
        ...Component.props, 
        ref: row => this._rows[`${secId}${rowId}`] = row, 
        onRowOpen: _ => this.onRowOpen(secId, rowId, this._rows), 
        onRowClose: _ => this.props.onRowClose && this.props.onRowClose(secId, rowId, this._rows), 
        onRowPress: _ => this.onRowPress(`${secId}${rowId}`), 
        setScrollEnabled: enable => this.setScrollEnabled(enable) 
       } 
      ); 
     } else { 
      return super.renderRow(rowData, secId, rowId, rowMap) 
     } 
    } 

    render() { 
    return (
     super.render() 
    ) 
    } 
} 

export default SwipeListViewNotification; 

SwipeRowNotification.js:

'use strict'; 

import React, { 
    PropTypes, 
} from 'react'; 
import { SwipeRow } from 'react-native-swipe-list-view'; 

class SwipeRowNotification extends SwipeRow { 

    constructor(props) { 
    super(props); 
    super.state = { 
     color: 'transparent' 
    }; 
    } 



manuallySwipeRow(toValue) { 
    if (toValue == 0) { 
     super.setState({color: 'transparent',opacity: 1}); 
    } 
    if (toValue == this.props.leftOpenValue) { 
     this.props.onOpenLeft(toValue); 
    } else if (toValue == this.props.rightOpenValue) { 
     this.props.onOpenRight(toValue); 
    } 
     super.manuallySwipeRow(toValue); 
    } 

    handlePanResponderMove(e, gestureState) { 
    super.handlePanResponderMove(e, gestureState); 
    const { moveX } = gestureState; 
    const translateX = this.state.translateX._value; 
    var opacity; 
    if (translateX == 0) { 
     opacity = 1; 
     super.setState({color: 'transparent',opacity}); 
    } else if (translateX < this.props.leftOpenValue && translateX >= 0) { 
     opacity = (0.5-(translateX/this.props.leftOpenValue)/2)+0.5; 
     super.setState({color: this.props.leftColor,opacity}); 
    } else if (translateX < 0 && translateX > this.props.rightOpenValue) { 
     opacity = (0.5-(translateX/this.props.rightOpenValue)/2)+0.5; 
     super.setState({color: this.props.rightColor,opacity}); 
    } else if (translateX >= this.props.leftOpenValue) { 
     opacity = 0.5; 
     super.setState({color: this.props.leftColor,opacity}); 
    } else if (translateX <= this.props.rightOpenValue) { 
     opacity = 0.5; 
     super.setState({color: this.props.rightColor,opacity}); 
    } 

    } 

    renderRowContent() { 
     if (this.state.dimensionsSet) { 
      return (
       <Animated.View 
        {...this._panResponder.panHandlers} 
        style={{ 
         transform: [ 
          {translateX: this.state.translateX} 
         ] 
        }} 
       > 
        {this.renderVisibleContent()} 
       </Animated.View> 
      ); 
     } else { 
      return (
       <Animated.View 
        {...this._panResponder.panHandlers} 
        onLayout={ (e) => this.onContentLayout(e) } 
        style={{ 
         transform: [ 
          {translateX: this.state.translateX} 
         ] 
        }} 
       > 
        {this.renderVisibleContent()} 
       </Animated.View> 
      ); 
     } 
    } 

    renderVisibleContent() { 
     const onPress = this.props.children[1].props.onPress; 

     if (onPress) { 
      const newOnPress = _ => { 
       this.onRowPress(); 
       onPress(); 
      } 
      return React.cloneElement(
       this.props.children[1], 
       { 
        ...this.props.children[1].props, 
        onPress: newOnPress, 
      style: {backgroundColor: this.state.color} 
       } 
      ); 
     } 

     return (
      <TouchableOpacity 
      activeOpacity={1} 
      onPress={ _ => this.onRowPress() } 
      > 
      <View style={{backgroundColor: this.state.color}}> 
       <View style={{opacity:this.state.opacity}}>{this.props.children[1]}</View> 
      </View> 
      </TouchableOpacity> 
) 

    } 


    render() { 
    return (
      <View> 
       <View></View> 
     <View> 
        {this.renderRowContent()} 
     </View> 
      </View> 
     ); 
    } 
} 

SwipeRowNotification.propTypes = { 
    onOpenLeft: PropTypes.func, 
    onOpenRight: PropTypes.func, 
    leftColor: PropTypes.string, 
    rightColor: PropTypes.string, 
} 

SwipeRowNotification.defaultProps = { 
    leftColor: 'red', 
    rightColor: 'green', 
} 

export default SwipeRowNotification;