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)}

有没有其他的方法来渲染行或显示在按钮上点击的行如我们在屏幕上滑动时所示

答

对于滑动回来，你可以使用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> 
    )}

是的，先生这是工作，但什么是该行地图rowMap [$ {secId} $的意义{rowId}]。closeRow（） – hammad

为什么传递secid和rowid plz会给出这个细节以及为什么我们需要secid – hammad

答

我也用这个API，但每一件事情的工作，我不知道如何打开hiddenrow 或swipeback按钮点击，如果有任何人知道，然后告诉我

先生您尝试上面的代码，它正在 – hammad

React native在按钮上单击滑动

相关推荐