react-native-swipeout onPress 方法禁用包含组件的 onPress 方法

Posted 2023-04-18

【中文标题】react-native-swipeout onPress 方法禁用包含组件的 onPress 方法

【英文标题】：react-native-swipeout onPress method disables containing component's onPress method

【发布时间】：2018-06-28 02:50:47

【问题描述】：

我有以下平面列表渲染方法，在点击列表项时，它将调用 this._onPress 方法：

render() 
      return (
      <TouchableOpacity  onPress=this._onPress >
        <View style=styles.bookItem >
          <Image style=styles.cover source=uri:this.props.coverURL/>
          <View style=styles.info >
            <Text style=styles.title>this.props.title </Text>
            <Text style=styles.author>this.props.author</Text>
            <Text style=height: 8/>
           </View>
           <View style=styles.rightIcon>
                <Icon name="chevron-right" size=28 color='#AAAAAA' />
          </View>
        </View>
      </TouchableOpacity>
    );
  

我在以下代码中添加了 swipeout 标签后，swipeout 可以工作，但点击一个项目不再调用 this._onPress 方法：

 render() 
    // Buttons
    var swipeoutBtns = [
      
        text: 'Delete',
        onPress: this._buttonPress
      
    ]
    return (
      <TouchableOpacity  onPress=this._onPress >
      <Swipeout right=swipeoutBtns >
        <View style=styles.bookItem >
          <Image style=styles.cover source=uri:this.props.coverURL/>
          <View style=styles.info >
            <Text style=styles.title>this.props.title </Text>
            <Text style=styles.author>this.props.author</Text>
            <Text style=height: 8/>
           </View>
           <View style=styles.rightIcon>
                <Icon name="chevron-right" size=28 color='#AAAAAA' />
          </View>
        </View>
      </Swipeout>
      </TouchableOpacity>
    );
  

这是对 react-native-swipeout 的限制吗？

【参考方案1】：

如果您将 Swipeout 作为第一个标签，并将 touchable 作为下一个嵌套标签，我认为它会起作用。但是，它似乎使 Swipeout 功能的响应速度降低