用 TouchableWithoutFeedback 反应本机 onPress 不起作用答案

【问题标题】：React native onPress with TouchableWithoutFeedback is not working用 TouchableWithoutFeedback 反应本机 onPress 不起作用
【发布时间】：2018-12-01 16:54:48
【问题描述】：

我正在开发一个简单的 React Native 应用程序用于学习目的。我只是迈出了进入 React Native 世界的第一步。但是在这个非常早期的阶段，我遇到了问题。我无法让简单的触摸事件正常工作。我正在使用 TouchableWithoutFeedback 实现触摸事件。这是我的代码。

class AlbumList extends React.Component {

    constructor(props)
    {
        super(props)
        this.state = {
            displayList : true
        }
    }
    componentWillMount() {
        this.props.fetchAlbums();
    }

    albumPressed(album)
    {
        console.log("Touch event triggered")
    }

    renderAlbumItem = ({item: album}) => {
        return (
                <TouchableWithoutFeedback onPress={this.albumPressed.bind(this)}>
                    <Card>
                        <CardSection>
                            <Text>{album.artist}</Text>
                        </CardSection>
                        <CardSection>
                            <Text>{album.title}</Text>
                        </CardSection>
                    </Card>
                </TouchableWithoutFeedback>
            )
    }

    render() {
        let list;
        if (this.state.displayList) {
            list = <FlatList
                data={this.props.albums}
                renderItem={this.renderAlbumItem}
                keyExtractor={(album) => album.title}
            />
        }

        return (
            list
        )
    }
}

const mapStateToProps = state => {
    return state.albumList;
}

const mapDispatchToProps = (dispatch, ownProps) => {
    return bindActionCreators({
        fetchAlbums : AlbumListActions.fetchAlbums
    }, dispatch)
}

export default connect(mapStateToProps, mapDispatchToProps)(AlbumList);

如您所见，我正在列表项上实现触摸事件。但是当我在模拟器上点击卡片时它根本没有触发。为什么？我该如何解决？

【问题讨论】：

代码没有问题。是否有任何错误或警告？
您是否处于调试模式？你没有在控制台中看到任何东西吗？
我改为显示警报。未触发。如果我使用 TouchableHighlight，它可以工作。
试试这个github.com/facebook/react-native/issues/…
TouchableWithoutFeedback 很糟糕，IMO。有时会无缘无故地不起作用，不使用与其他可触摸对象相同的 API。无缘无故需要单个视图作为孩子，不支持绝对定位。比如，为什么？

标签： react-native touchablewithoutfeedback

【解决方案1】：

你应该像这样将你的内容包装在组件中：

<TouchableWithoutFeedback>
 <View>
  <Your components...>
 </View>
</TouchableWithoutFeedback>

【讨论】：

github issue 已经在 cmets 中讨论过了。也许您可以填写其他详细信息，以便将所有信息集中在一个地方。简单地发布一个没有解释的代码 sn-p 很少有帮助。
我必须首先搜索任何问题或错误，而不是自己弄清楚并在小事情上浪费大量时间。这已经是已知的问题......为什么感谢发布这个答案。

【解决方案2】：

TouchableWithoutFeedback 总是需要有子 View 组件。所以一个组成 View 的组件是不够的。

所以不是

<TouchableWithoutFeedback onPressIn={...} onPressOut={...} onPress={...}>
  <MyCustomComponent />
</TouchableWithoutFeedback>

使用：

<TouchableWithoutFeedback onPressIn={...} onPressOut={...} onPress={...}>
  <View>
    <MyCustomComponent />
  </View>
</TouchableWithoutFeedback>

查看github issue了解更多信息

【讨论】：

【解决方案3】：

可以和<TouchableOpacity activeOpacity={1.0}> </TouchableOpacity>一起使用

【讨论】：

更好的解决方案 IMO

【解决方案4】：

对于那些在 react-native 0.64 中遇到这个问题的人，并且将其包装在一个 View 中不起作用，试试这个：

  <TouchableWithoutFeedback onPress={onPress}>
    <View pointerEvents="none">
      <Text>Text</Text>
    </View>
  </TouchableWithoutFeedback>

【讨论】：

非常感谢。 pointerEvents="none" 帮助我解决了一个特定问题。

【解决方案5】：

在我的情况下，下面有一个阴影，导致不稳定。我解决它的方法很简单：zIndex: 65000

<View style={{ zIndex: 65000 }}>
   <TouchableWithoutFeedback onPressIn={() =>  {}>
     <View>
     </View>
   </TouchableWithoutFeedback>
</View>

【讨论】：

【解决方案6】：

在我的情况下，我不小心从 react-native-web 而不是 react-native 导入了 TouchableWithoutFeedback。从 react-native 导入后，一切都按预期工作。

【讨论】：