Question

我正在出于学习目的开发一个简单的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);

如您所见，我正在列表项上实现触摸事件。但是，当我单击Simulator上的卡时，它根本不会触发。为什么？我该如何解决？

Answer 1

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

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

Answer 2

可以与<TouchableOpacity activeOpacity={1.0}> </TouchableOpacity>

一起使用

Answer 3

TouchableWithoutFeedback始终需要具有子元素View。因此，仅组成View的组件是不够的。

所以不是

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

使用：

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

有关更多信息，请参见github issue

Answer 4

对于那些在 react-native 0.64 中遇到此问题并且仅将其包装在 View 中不起作用的人，请尝试以下操作：

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

用TouchableWithoutFeedback反应本机onPress不起作用

4 个答案: