反应原生:按 on Press 操作会阻止滑动操作

Question

我正在使用react-native-swipeout刷卡，卡也应该有onPress操作来打开一个新页面。

        <Swipeout
            ref={ref => {this.Swipeout[index] = ref}}
            backgroundColor={'transparent'} 
            right={swipeoutBtns}
            scroll={(scrollEnabled) => this.onSwipe(scrollEnabled)}
            sensitivity={1}
            buttonWidth={70}
            onOpen={() => this.onSwipeOpen(index)}
        >   
            <TouchableOpacity onPress={() => this.onRowClick(item)} title="" style={{ margin: 20}}>
                {this.renderCardItems(item, index)}
            </TouchableOpacity> 
        </Swipeout>

刷卡有时不起作用，因为内部卡片项目具有onPress动作。如果TouchableOpacity替换为View则滑动将按预期工作。我相信一旦触摸屏幕onPress就会比Swipeout更早调用.

如何防止此行为？

Answer 1

尝试在刷卡标签中使用 TouchableHighlight 如下。然后将卡组件放在代码中的指向位置。这在iOS和Android上都对我有用。请同时安装以下计时器：

import Timer from 'react-native-timer';

然后在按下按钮中使用。因此，通过这种方式，您将避免异步问题。我希望我能提供帮助。

onPressFunction=()=>{
 Timer.setTimeout(
                  this, 'modalBottom', () => {
                     //execute your function 
                  }, 200
                );
}
     componentWillUnmount(){
        Timer.clearTimeout('modalBottom');
      }
          render(rowData) {
                // in this part you can design the button in swiped mode
                let swipeBtns = [{
                  backgroundColor: 'transparent',
                  component: (<View style={{ flex:1, justifyContent:'center',  alignItems:'center', }}>
                  </View>),
                  onPress: () => { 
                     //execute your function 
                }
                }];
                return (
                  <Swipeout right={swipeBtns}
                  backgroundColor= 'transparent'>
                  <TouchableHighlight onPress={this.onPressFunction}>
                  <View style={styles.buttonStyle} >
                  ////Put your card component here
                  </View>
                  </TouchableHighlight>
                  </Swipeout>
                );
              }
            }

Answer 2

我认为还有更轻松的方法可以实现这一点：-）

<TouchableWithoutFeedback onPressOut={() => onPress()} delayPressOut={500}>