panResponder无法在React Native Android中工作

时间:2018-07-22 10:39:48

标签: android react-native

我没有看到panResponsders在我的android手机中运行,我也没有看到应用程序按预期运行。我正在使用expo,我对其进行了扫描以在我的android设备上运行该应用程序。我还使用了调试器,但似乎无济于事。

export default  class Deck extends React.Component {
    constructor(props){
        super(props);
        //decalred as  local variable 
        this.PanResponder=PanResponder.create({
            onStartShouldSetPanResponder: () => true,
            onPanResponderMove:(event,gesture)=>{
                debugger;
                console.log(gesture);
            },
            onPanResponderRelease:()=>{}
        });
        this.state={PanResponder};
    }
    renderCards=()=>{
        return this.props.data.map(item => {
            return this.props.renderCards(item);
        });
    }
    render(){
        return(
         <View {...this.state.PanResponder.panHandlers}> 
             {this.renderCards()}
         </View>
        );
    }
}

1 个答案:

答案 0 :(得分:1)

1)您设置了this.state = {PanResponder} 这个来自本机的PanResponder

所以this.state.PanResponder.panHandlers没什么。

尝试

export default  class Deck extends React.Component {
constructor(props){
    super(props);
    //decalred as  local variable 
    this.panResponder=PanResponder.create({
        onStartShouldSetPanResponder: () => true,
        onPanResponderMove:(event,gesture)=>{
            debugger;
            console.log(gesture);
        },
        onPanResponderRelease:()=>{}
    });
}
render(){
    return(
        <View {...this.panResponder.panHandlers}>
        </View>
    );
}

}

export default  class Deck extends React.Component {
constructor(props){
    super(props);
    //decalred as  local variable 
    const panResponder=PanResponder.create({
        onStartShouldSetPanResponder: () => true,
        onPanResponderMove:(event,gesture)=>{
            debugger;
            console.log(gesture);
        },
        onPanResponderRelease:()=>{}
    });
    this.state={panResponder};
}
render(){
    return(
        <View {...this.state.panResponder.panHandlers}>
        </View>
    );
}

}