Question

我正在使用react-native-swipe-list-view api进行swipeout.I我想在点击按钮撤消时向后滑动。当我点击删除按钮时它正在工作，但按钮撤消不起作用。代码是

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

是否还有其他任何方法可以在按钮点击时将行orshow渲染到我们刷屏幕时显示

Answer 1

对于向后滑动，您可以使用已传递到 renderHiddenRow 属性的 rowMap 的 closeRow 。将onPress={ _ => this.undoRow(secId, rowId, rowMap) }替换为onPress={ _ => rowMap[ $ {secId} $ {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>
    )}

按住按钮点击

1 个答案: