我正在为学习目的开发一个简单的React原生应用程序.我只是迈出了第一步,进入了自己的世界.但在这个非常早期的阶段,我遇到了一些问题.我无法让一个简单的touch 事件工作.我正在使用Touchablewithoutback实现touch 事件.这是我的密码.

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);

如您所见,我正在列表项上实现touch 事件.但当我点击模拟器上的卡时,它根本不会触发.为什么?我该怎么修?

推荐答案

您应该像这样将内容包装到组件中:

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

React-native相关问答推荐

react 本机中的TextInput对齐中的长文本

将 Cognito 用户与真实数据库用户联系起来的最佳方式是什么?

获取 TypeError:this.InnerNativeModule.configureProps 不是 mac 上 expo 中的函数

React Native - React Native 架构

错误:HostFunction 中的异常: Malformed calls from JS: field sizes are different. In an Animated View

React Native 开发中的/ios/index/DataStore文件夹是什么

Soundcloud API /stream 端点给出 401 错误

使用 react-native 单击时如何更改图像和文本 colored颜色 ?

如何在 React Native 中删除警告

redux-observable Promise 在单元测试中没有得到解决

React 中的 getSnapshotBeforeUpdate() 是什么?

React Native:ScrollView 中的 TouchableOpacity onPress 问题

React Native 创建自定义组件/库

带有 xcode 模拟器的 react-native 有非常慢的alert

更新 this.state.dataSource 不会更新 ListView

React Native Android 文本组件额外填充

React Native - Firebase 身份验证持久性不起作用

运行时尚未准备好进行调试

React Native 必须双击才能使 onPress 工作

无法读取未定义的属性 string| React.PropTypes | LayoutPropTypes.js