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

尝试如下在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>

                );
              }
            }

React-native：onPress操作阻止滑动操作

1 个答案: