React native在按鈕上單擊滑動

我正在使用react-native-swipe-list-view api進行swipeout.I要向後滑動，當點擊按鈕undo.When點擊刪除按鈕時它正在工作，但對於按鈕撤消不工作。代碼React native在按鈕上單擊滑動

import React, { 
    Component, 
} from 'react'; 
import { 
    AppRegistry, 
    ListView, 
    StyleSheet, 
    Text, 
    TouchableOpacity, 
    TouchableHighlight, 
    View, 
    Alert, 
    Dimensions 
} from 'react-native'; 

import { SwipeListView, SwipeRow } from 'react-native-swipe-list-view'; 
var alertMessage="You want to Delete it"; 
var alertMessage1='why press it' 
var v1=1.0; 
const wid=Dimensions.get('window').width; 
class App extends Component { 

    constructor(props) { 
     super(props); 
     this.ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2}); 
     this.state = { 
      basic: true, 
      listViewData: Array(20).fill('').map((_,i)=>`item #${i}`) 
     }; 
    } 

    deleteRow(secId, rowId, rowMap) { 
     rowMap[`${secId}${rowId}`].closeRow(); 
     const newData = [...this.state.listViewData]; 
     newData.splice(rowId, 1); 
     this.setState({listViewData: newData}); 
    } 

    undoRow(secId, rowId, rowMap) { 
    v=0.0 
    } 
    render() { 
     return (

        <SwipeListView 
         dataSource={this.ds.cloneWithRows(this.state.listViewData)} 
         renderRow={ data => (

          <TouchableHighlight 
           onPress={ _ => Alert.alert(
      'Alert Title', 
      alertMessage1, 
     ) } 
           style={styles.rowFront} 
           underlayColor={'#AAA'} 
          > 
            <Text>I am {data} in a SwipeListView</Text> 

          </TouchableHighlight> 
         )} 
         renderHiddenRow={ (data, secId, rowId, rowMap) => (
          <View style={styles.rowBack}> 

           <TouchableOpacity style={{backgroundColor:'red',alignItems: 'center',bottom: 0,justifyContent: 'center',position: 'absolute',top: 0,width: 75}} 
            onPress={ _ => this.undoRow(secId, rowId, rowMap) }> 
            <Text style={{backgroundColor:'red'}}>Undo</Text> 
           </TouchableOpacity> 

           <TouchableOpacity style={[styles.backRightBtn, styles.backRightBtnRight]} 
            onPress={ _ => Alert.alert(
            'Are You Sure',alertMessage, 
             [{text: 'OK', onPress:() =>this.deleteRow(secId, rowId, rowMap)}, 
             {text: 'Cancel',}] 
     ) }> 
            <Text style={styles.backTextWhite}>Delete</Text> 
           </TouchableOpacity> 
          </View> 
         )} 
         leftOpenValue={wid*v} 
         rightOpenValue={wid*(-v)} 

        />

我是排開的值更改爲0時，它是0，那麼隱藏的行不顯示

undoRow(secId, rowId, rowMap) { 
     v=0.0 
     }

這是左，右值

leftOpenValue={wid*v} 
          rightOpenValue={wid*(-v)}

有沒有其他的方法來渲染行或顯示在按鈕上點擊的行如我們在屏幕上滑動時所示

來源

2017-04-18 hammad

對於滑動回來，你可以使用rowMap的closeRow其中已被傳遞給renderHiddenRow屬性。與onPress={ _ => rowMap[ $ {secId} $更換onPress={ _ => this.undoRow(secId, rowId, rowMap) } {ROWID} ].closeRow() }：

renderHiddenRow={ (data, secId, rowId, rowMap) => (
     <View style={styles.rowBack}> 

     <TouchableOpacity style={{ 
      backgroundColor: 'red', 
      alignItems: 'center', 
      bottom: 0, 
      justifyContent: 'center', 
      position: 'absolute', 
      top: 0, 
      width: 75 
     }} 
          onPress={ _ => rowMap[ `${secId}${rowId}` ].closeRow() }> 
      <Text style={{ backgroundColor: 'red' }}>Undo</Text> 
     </TouchableOpacity> 

     <TouchableOpacity style={[ styles.backRightBtn, styles.backRightBtnRight ]} 
          onPress={ _ => Alert.alert(
          'Are You Sure', alertMessage, 
          [ { text: 'OK', onPress:() => this.deleteRow(secId, rowId, rowMap) }, 
           { text: 'Cancel', } ] 
         ) }> 
      <Text style={styles.backTextWhite}>Delete</Text> 
     </TouchableOpacity> 
     </View> 
    )}

來源

2017-04-18 13:23:44

是的，先生這是工作，但什麼是該行地圖rowMap [$ {secId} $的意義{rowId}]。closeRow（） – hammad

爲什麼傳遞secid和rowid plz會給出這個細節以及爲什麼我們需要secid – hammad

我也用這個API，但每一件事情的工作，我不知道如何打開hiddenrow 或swipeback按鈕點擊，如果有任何人知道，然後告訴我

來源

2017-04-18 12:56:31

先生您嘗試上面的代碼，它正在 – hammad

React native在按鈕上單擊滑動

回答

相關問題