dancormier / react-native-swipeout

iOS-style swipeout buttons behind component
MIT License
2.62k stars 649 forks source link

ListView里面的onEndReached方法添加的row,不能实现滑动一行关闭另一行的swipeOut #211

Open huanghaodong opened 7 years ago

huanghaodong commented 7 years ago

如题。

HeartSea commented 7 years ago

请问解决了吗,我也遇到这问题,滑动一个,另一个也不关闭

silentcloud commented 7 years ago

给出代码

huanghaodong commented 7 years ago

import React,{Component} from 'react'; import { AppRegistry, AsyncStorage, Button, StyleSheet, Text, View, ListView, TouchableWithoutFeedback } from 'react-native'; import Swipeout from 'react-native-swipeout'; const rows = [1,2,3,4,5,6,7,8,9]; class deleteMe extends Component {

constructor() { super();

var ds = new ListView.DataSource({rowHasChanged: (row1, row2) => row1!==row2});

this.state = {
  dataSource: ds.cloneWithRows(rows),
  rowID: '',
  sectionID:''
};

}

_renderRow(rowData, sectionID, rowID) { return ( <Swipeout close={!(this.state.sectionID === sectionID && this.state.rowID === rowID)}//点其他行就关闭当前行的swipe right={[{text:'button'}]} rowID={rowID} sectionID={sectionID} autoClose={true} backgroundColor={'#fff'} onOpen={(sectionID,rowID) => { console.log(1) this.setState({ sectionID, rowID,

      })
    }}

  >
    <TouchableWithoutFeedback onPress={() => console.log('press children')}>
      <View style={styles.li} >
        <Text>{rowData}</Text>
      </View>
    </TouchableWithoutFeedback>
  </Swipeout>
);

}

render() { return (

);

}

}

const styles = StyleSheet.create({ container:{ backgroundColor:'#fff', flex:1 }, li:{ height:60, borderColor:'#000', borderBottomWidth:1 } }) AppRegistry.registerComponent('deleteMe', () => deleteMe);

huanghaodong commented 7 years ago

代码怎么显示不完整,render(){}里面就一个ListView

huanghaodong commented 7 years ago

https://github.com/huanghaodong/learngit

HeartSea commented 7 years ago

<Swipeout close={!(this.state.sectionID === sectionID && this.state.rowID === rowID)}//关闭滑动拖拽 left={rowData.left}//在左侧进行拖拽 right={this.state.Rightbuttons} 在右侧进行拖拽 rowID={rowID}

            sectionID={sectionID}
            autoClose={true}//按钮点击是否自动关闭
            backgroundColor={'#fff'}
            onOpen={(sectionID, rowID) => {
                this.setState({
                    sectionID,
                    rowID,
                })
            }}
            onClose={() => console.log('===close')}
            scroll={this.props.scroll}
        >
huanghaodong commented 7 years ago

兄弟,问题解决了没有

silentcloud commented 7 years ago

代码打包传上来 @huanghaodong ,github 地址 404 了

huanghaodong commented 7 years ago

你好,代码在这里http://a534634672.blog.163.com/blog/static/266688043201773015754876/

whowrongswhere commented 6 years ago

解决方式: 1.初始化: this.state.rowID= ‘’; 2. _renderItem = ({item}) => { let rowID = this.state.rowID; let deleteButton = { text: '删除', backgroundColor: 'red', onPress: () => { this._onDeleteLogs(item); } }; return ( <Swipeout right={[deleteButton]} close={item.pid !== rowID} onOpen={() => { this.setState({ rowID: item.pid }); }} autoClose={true}>

onreadystatechange commented 6 years ago

确实存在这个问题,感觉close这个props不起作用

binbin-smile commented 6 years ago

The same problem

youngjuning commented 5 years ago

store

onRef = (ref, index) => {
    if (ref) {
      this.swipeItems[index] = ref
    }
  }

  @action onOpen = index => {
    const activeSwipItem = this.swipeItems[this.activeSwipItem]
    activeSwipItem && activeSwipItem._close()
    this.activeSwipItem = index
  }

onRef = (ref, index) => {
    if (ref) {
      this.swipeItems[index] = ref
    }
  }

  @action onOpen = index => {
    const activeSwipItem = this.swipeItems[this.activeSwipItem]
    activeSwipItem && activeSwipItem._close()
    this.activeSwipItem = index
  }

页面

<Swipeout
        key={index.toString()}
        autoClose
        ref={ref => this.store.onRef(ref, index)}
        style={{ backgroundColor: 'transparent' }}
        right={right}
        onOpen={() => this.store.onOpen(index)}
      ></Swipeout>