React Native ：onPress操作阻止了滑动操作

ulydmbyx 于 2022-12-14 发布在 React

关注(0)|答案(2)|浏览(224)

我正在使用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更快地被调用。
如何防止这种行为？

react-native

来源：https://stackoverflow.com/questions/54341290/react-native-onpress-action-is-preventing-swipe-action

2条答案

按热度按时间

hfwmuf9z1#

尝试在Swipeout标签中使用TouchableHighlight，如下所示。然后将卡片组件放在代码中指定的位置。这对我在iOS和Android上都有效。还请安装以下计时器：

import Timer from 'react-native-timer';

然后在onPress按钮中使用。这样你就可以避免异步问题。希望我能帮上忙。

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>

                );
              }
            }

赞(0）回复(0）举报 2022-12-14

oiopk7p52#

我认为还有更简单的方法来实现这一点：-）

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

赞(0）回复(0）举报 2022-12-14

我来回答

React Native ：onPress操作阻止了滑动操作

2条答案

相关问题

热门标签

最新问答