代码之家  ›  专栏  ›  技术社区  ›  ThinkAndCode

React native:onPress操作正在阻止刷卡操作

  •  1
  • ThinkAndCode  · 技术社区  · 6 年前

    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>
    

    由于卡内物品有 新闻 TouchableOpacity 被替换为 View 新闻 Swipeout

    我怎样才能防止这种行为?

    1 回复  |  直到 6 年前
        1
  •  0
  •   Saeid    6 年前

    尝试在Swipeout标签中使用touchablehighting,如下所示。然后将您的卡组件放在代码中的指定位置。这对我在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>
    
                    );
                  }
                }