{"id":514,"date":"2023-02-25T14:30:31","date_gmt":"2023-02-25T06:30:31","guid":{"rendered":"https:\/\/www.appblog.cn\/?p=514"},"modified":"2023-04-29T20:45:51","modified_gmt":"2023-04-29T12:45:51","slug":"react-native-learning-panresponder-gesture-recognition","status":"publish","type":"post","link":"https:\/\/www.appblog.cn\/index.php\/2023\/02\/25\/react-native-learning-panresponder-gesture-recognition\/","title":{"rendered":"React Native\u5b66\u4e60\u4e4bPanResponder\u624b\u52bf\u8bc6\u522b"},"content":{"rendered":"

PanResponder\u57fa\u672c\u4ecb\u7ecd<\/h2>\n

PanResponder\uff1a\u5e73\u5e95\u9505\u7684\u54cd\u5e94\u8005\u3002PanResponder\u7c7b\u53ef\u4ee5\u5c06\u591a\u70b9\u89e6\u6478\u64cd\u4f5c\u534f\u8c03\u6210\u4e00\u4e2a\u624b\u52bf\u3002\u5b83\u4f7f\u5f97\u4e00\u4e2a\u5355\u70b9\u89e6\u6478\u53ef\u4ee5\u63a5\u53d7\u66f4\u591a\u7684\u89e6\u6478\u64cd\u4f5c\uff0c\u4e5f\u53ef\u4ee5\u7528\u4e8e\u8bc6\u522b\u7b80\u5355\u7684\u591a\u70b9\u89e6\u6478\u624b\u52bf\u3002<\/p>\n

<\/p>\n

React Native \u6846\u67b6\u5e95\u5c42\u7684\u624b\u52bf\u54cd\u5e94\u7cfb\u7edf\u63d0\u4f9b\u4e86\u54cd\u5e94\u5904\u7406\u5668\uff0cPanResponder\u5c06\u8fd9\u4e9b\u624b\u52bf\u54cd\u5e94\u5904\u7406\u5668\u518d\u6b21\u8fdb\u884c\u5c01\u88c5\uff0c\u4ee5\u4fbf\u5f00\u53d1\u8005\u66f4\u5bb9\u6613\u5bf9\u624b\u52bf\u8fdb\u884c\u5904\u7406\uff0c\u66f4\u5bb9\u6613\u9884\u6d4b\u7528\u6237\u7684\u624b\u52bf\uff0c\u5bf9\u6bcf\u4e00\u4e2a\u624b\u52bf\u54cd\u5e94\u5904\u7406\u5668\uff0cPanResponder\u9664\u4e86\u4e3a\u5176\u63d0\u4f9b\u4ee3\u8868\u89e6\u6478\u884c\u4e3a\u7684\u539f\u751f\u4e8b\u4ef6\u5916\uff0c\u8fd8\u63d0\u4f9b\u4e86\u4e00\u4e2a\u65b0\u7684\u624b\u52bf\u72b6\u6001\u5bf9\u8c61\u7528\u6765\u8be6\u7ec6\u63cf\u8ff0\u624b\u52bf\u7684\u72b6\u6001\u3002<\/p>\n

PanResponder\u7684\u57fa\u672c\u601d\u60f3\u662f\uff1a\u76d1\u89c6\u5c4f\u5e55\u4e0a\u6307\u5b9a\u5927\u5c0f\u3001\u4f4d\u7f6e\u7684\u77e9\u5f62\u533a\u57df\uff0c\u5f53\u7528\u624b\u6307\u6309\u538b\u8fd9\u4e2a\u533a\u57df\u4e2d\u7684\u67d0\u70b9\u540e\uff0c\u7cfb\u7edf\u4f1a\u6536\u5230\u8fd9\u4e2a\u4e8b\u4ef6\uff0c\u5f53\u6309\u538b\u540e\u62d6\u52a8\u624b\u6307\u65f6\uff0c\u4f1a\u6536\u5230\u624b\u52bf\u5f15\u53d1\u7684\u5404\u7c7b\u4e8b\u4ef6\uff0c\u5f53\u624b\u6307\u79bb\u5f00\u8fd9\u4e2a\u77e9\u5f62\u533a\u57df\u65f6\uff0c\u5f00\u53d1\u8005\u4e5f\u4f1a\u6536\u5230\u76f8\u5e94\u7684\u4e8b\u4ef6\u3002<\/strong><\/p>\n

\n

\u6ce8\u610f\uff1a\u5f00\u53d1\u8005\u53ef\u4ee5\u4efb\u610f\u6307\u5b9a\u76d1\u89c6\u77e9\u5f62\u533a\u57df\u7684\u5927\u5c0f\uff0c\u4f46\u5728\u8fd9\u4e2a\u533a\u57df\u91cc\uff0c\u53ea\u6709\u7b2c\u4e00\u4e2a\u6309\u4e0b\u7684\u4e8b\u4ef6\u4f1a\u4e0a\u62a5\u548c\u7ee7\u7eed\u76d1\u89c6\u5904\u7406\uff0c\u5982\u679c\u7b2c\u4e00\u4e2a\u624b\u6307\u6309\u4e0b\u8fd8\u6ca1\u6709\u79bb\u5f00\uff0c\u63a5\u7740\u7b2c\u4e8c\u4e2a\u624b\u6307\u53c8\u6765\u6309\u4e0b\u4e86\uff0c\u90a3\u4e48\u5bf9\u7b2c\u4e8c\u4e2a\u624b\u6307\u7684\u5404\u79cd\u89e6\u6478\u4e8b\u4ef6\u65e0\u6cd5\u6355\u83b7\u3002<\/p>\n

\u6ce8\u610f\uff1a\u5f00\u53d1\u8005\u53ef\u4ee5\u5728\u5c4f\u5e55\u4e0a\u6307\u5b9a\u591a\u4e2a\u76d1\u89c6\u77e9\u5f62\u533a\u57df\uff0c\u4f46\u662f\u4e0d\u80fd\u540c\u65f6\u76d1\u89c6\u591a\u4e2a\u77e9\u5f62\u533a\u57df\u7684\u4e0d\u540c\u89e6\u6478\u4e8b\u4ef6\u3002<\/p>\n

\u6ce8\u610f\uff1a\u76d1\u89c6\u533a\u57df\u4f1a\u963b\u6b62\u88ab\u76d1\u89c6\u533a\u57df\u8986\u76d6\u7684\u7ec4\u4ef6\u63a5\u6536\u89e6\u6478\u4e8b\u4ef6\uff0c\u6bd4\u5982\u76d1\u89c6\u533a\u57df\u8986\u76d6\u4e86\u4e00\u4e2a\u6309\u94ae\uff0c\u90a3\u4e48\u5c31\u65e0\u6cd5\u901a\u8fc7\u70b9\u51fb\u8fd9\u4e2a\u6309\u94ae\u6765\u89e6\u53d1\u5176\u5bf9\u5e94\u7684\u4e8b\u4ef6\uff0c\u53ea\u80fd\u5728PanResponder\u76d1\u89c6\u5668\u7684\u4e8b\u4ef6\u5904\u7406\u4e2d\u5bf9\u89e6\u6478\u884c\u4e3a\u8fdb\u884c\u5904\u7406<\/p>\n<\/blockquote>\n

\u5229\u7528PanResponder\u5b9e\u73b0\u76d1\u89c6\u5668\u7684\u6b65\u9aa4<\/h2>\n

\uff081\uff09\u6307\u5b9a\u76d1\u89c6\u533a\u57df<\/p>\n

\u5982\u679c\u76d1\u89c6\u533a\u57df\u6709\u591a\u4e2a\uff0c\u4e00\u5b9a\u4e0d\u80fd\u91cd\u53e0\uff0c\u5426\u5219\u90fd\u5931\u6548<\/p>\n

\uff082\uff09\u5b9a\u4e49\u76d1\u89c6\u5668\u76f8\u5173\u53d8\u91cf<\/p>\n

\u6307\u5411\u76d1\u89c6\u5668\u7684\u53d8\u91cf\uff08\u5fc5\u987b\u6709\uff09\u3001\u6307\u5411\u76d1\u89c6\u5668\u76d1\u89c6\u533a\u57df\u7684\u53d8\u91cf\uff08\u53ef\u4ee5\u6709\uff09\u3001\u8bb0\u5f55\u76d1\u89c6\u533a\u57df\u5de6\u4e0a\u89d2\u9876\u70b9\u5750\u6807\u7684\u4e24\u4e2a\u6570\u503c\u53d8\u91cf\uff08\u53ef\u4ee5\u6709\uff09\u3001\u4e0a\u4e00\u6b21\u89e6\u6478\u70b9\u7684\u6a2a\u7eb5\u5750\u6807\u53d8\u91cf\uff08\u53ef\u4ee5\u6709\uff09<\/p>\n

\uff083\uff09\u51c6\u5907\u76d1\u89c6\u5668\u7684\u4e8b\u4ef6\u5904\u7406\u51fd\u6570\uff0813\u4e2a\uff09<\/p>\n

\uff084\uff09\u5efa\u7acb\u76d1\u89c6\u5668\uff08PanResponder.create<\/code>\uff09<\/p>\n

\uff085\uff09\u5c06\u76d1\u89c6\u5668\u4e0e\u76d1\u89c6\u533a\u57df\u5173\u8054 {% raw %}{...this.watcher.panHandlers}{% endraw %}<\/code><\/p>\n

\u4e00\u4e2a\u624b\u52bf\u5bf9\u8c61 gestureState \u5305\u542b\u7684\u5b57\u6bb5<\/h2>\n
    \n
  • stateID<\/code> – \u89e6\u6478\u72b6\u6001\u7684ID\u3002\u5728\u5c4f\u5e55\u4e0a\u81f3\u5c11\u6709\u4e00\u4e2a\u89e6\u6478\u70b9\u7684\u60c5\u51b5\u4e0b\uff0c\u8fd9\u4e2aID\u4f1a\u4e00\u76f4\u6709\u6548\u3002<\/li>\n
  • moveX<\/code> – \u6700\u8fd1\u4e00\u6b21\u79fb\u52a8\u65f6\u7684\u5c4f\u5e55\u6a2a\u5750\u6807<\/li>\n
  • moveY<\/code> – \u6700\u8fd1\u4e00\u6b21\u79fb\u52a8\u65f6\u7684\u5c4f\u5e55\u7eb5\u5750\u6807<\/li>\n
  • x0<\/code> – \u5f53\u54cd\u5e94\u5668\u4ea7\u751f\u65f6\u7684\u5c4f\u5e55\u5750\u6807<\/li>\n
  • y0<\/code> – \u5f53\u54cd\u5e94\u5668\u4ea7\u751f\u65f6\u7684\u5c4f\u5e55\u5750\u6807<\/li>\n
  • dx<\/code> – \u4ece\u89e6\u6478\u64cd\u4f5c\u5f00\u59cb\u65f6\u7684\u7d2f\u8ba1\u6a2a\u5411\u8def\u7a0b<\/li>\n
  • dy<\/code> – \u4ece\u89e6\u6478\u64cd\u4f5c\u5f00\u59cb\u65f6\u7684\u7d2f\u8ba1\u7eb5\u5411\u8def\u7a0b<\/li>\n
  • vx<\/code> – \u5f53\u524d\u7684\u6a2a\u5411\u79fb\u52a8\u901f\u5ea6<\/li>\n
  • vy<\/code> – \u5f53\u524d\u7684\u7eb5\u5411\u79fb\u52a8\u901f\u5ea6<\/li>\n
  • numberActiveTouches<\/code> – \u5f53\u524d\u5728\u5c4f\u5e55\u4e0a\u7684\u6709\u6548\u89e6\u6478\u70b9\u7684\u6570\u91cf<\/li>\n<\/ul>\n

    \u624b\u52bf\u64cd\u4f5c\u5b9e\u4f8b<\/h2>\n

    \u70b9\u51fb\u3001\u62d6\u52a8\u9009\u62e9\u767e\u5206\u767e\u53c2\u6570\uff0c\u6bd4\u5982\u8bf4\u64ad\u653e\u5668\u7684\u97f3\u91cf\u5927\u5c0f\u3002<\/p>\n

    index.android.js<\/h3>\n
    \/**\n * Sample React Native App\n * https:\/\/github.com\/facebook\/react-native\n * @flow\n *\/\n\nimport React, { Component } from 'react';\nimport {\n    AppRegistry,\n    StyleSheet,\n    Text,\n    PanResponder,\n    ProgressBarAndroid,\n    View\n} from 'react-native';\n\nimport Dimensions from 'Dimensions';\n\nlet totalWidth = Dimensions.get('window').width;\n\nclass RNAPP extends Component {\n    constructor(props) {\n        super(props);\n        this.state = {\n            progress: 0,\n        }\n    }\n\n    componentWillMount() {\n        this.watcher = PanResponder.create({\n            onStartShouldSetPanResponder: () => true,\n            onPanResponderGrant: this._onPanResponderGrant, \/\/\u5904\u7406\u6309\u4e0b\u7684\u4e8b\u4ef6\n            onPanResponderMove: this._onPanResponderMove, \/\/\u5904\u7406\u79fb\u52a8\u7684\u4e8b\u4ef6\n        });\n    }\n\n    _onPanResponderGrant = (event, gestureState) => {\n        let touchPonitX = gestureState.x0; \/\/\u83b7\u53d6\u89e6\u6478\u70b9\u7684\u6a2a\u5750\u6807\n        let progress;\n        if (touchPonitX < 20)\n            progress = 0;\n        else {\n            if (touchPonitX > (totalWidth - 20))\n                progress = 1;\n            else\n                progress = (touchPonitX - 20) \/ (totalWidth - 40);\n        }\n        this.setState({ progress });\n    }\n\n    _onPanResponderMove = (event, gestureState) => {\n        let touchPonitX = gestureState.moveX;\n        let progress;\n        if (touchPonitX < 20)\n            progress = 0;\n        else {\n            if (touchPonitX > (totalWidth - 20))\n                progress = 1;\n            else\n                progress = (touchPonitX - 20) \/ (totalWidth - 40);\n        }\n        this.setState({ progress });\n    }\n\n    render() {\n        return (\n            <View style={styles.container}>\n                <ProgressBarAndroid\n                    styleAttr='Horizontal'\n                    indeterminate={false}\n                    style={styles.ProgressViewStyle}\n                    progress={this.state.progress}\n                    \/>\n                <Text style={styles.textStyle}>\u8fdb\u5ea6\uff1a{Math.round(this.state.progress * 100) }%<\/Text>\n                \/\/\u624b\u52bf\u76d1\u89c6\u533a\u57df\n                <View style={styles.touchViewStyle}\n                    {...this.watcher.panHandlers}\n                    \/>\n            <\/View>\n        );\n    }\n}\n\nconst styles = StyleSheet.create({\n    container: {\n        flex: 1,\n    },\n    ProgressViewStyle: {\n        width: totalWidth - 40,\n        left: 20,\n        top: 50,\n    },\n    touchViewStyle: {\n        width: totalWidth - 20,\n        height: 40,\n        backgroundColor: 'transparent',\n        position: 'absolute',\n        left: 10,\n        top: 32,\n    },\n    textStyle: {\n        fontSize: 30,\n        left: 20,\n        top: 70,\n    },\n});\n\nAppRegistry.registerComponent('RNAPP', () => RNAPP);<\/code><\/pre>\n
    index.ios.js<\/h3>\n
    \/**\n * Sample React Native App\n * https:\/\/github.com\/facebook\/react-native\n * @flow\n *\/\n\nimport React, { Component } from 'react';\nimport {\n    AppRegistry,\n    StyleSheet,\n    Text,\n    PanResponder,\n    ProgressViewIOS,\n    View\n} from 'react-native';\n\nimport Dimensions from 'Dimensions';\n\nlet totalWidth = Dimensions.get('window').width;\n\nclass RNAPP extends Component {\n    constructor(props) {\n        super(props);\n        this.state = {\n            progress: 0,\n        }\n    }\n\n    componentWillMount() {\n        this.watcher = PanResponder.create({\n            onStartShouldSetPanResponder: () => true,\n            onPanResponderGrant: this._onPanResponderGrant, \/\/\u5904\u7406\u6309\u4e0b\u7684\u4e8b\u4ef6\n            onPanResponderMove: this._onPanResponderMove, \/\/\u5904\u7406\u79fb\u52a8\u7684\u4e8b\u4ef6\n        });\n    }\n\n    _onPanResponderGrant = (event, gestureState) => {\n        let touchPonitX = gestureState.x0;\n        let progress;\n        if (touchPonitX < 20)\n            progress = 0;\n        else {\n            if (touchPonitX > (totalWidth - 20))\n                progress = 1;\n            else\n                progress = (touchPonitX - 20) \/ (totalWidth - 40);\n        }\n        this.setState({ progress });\n    }\n\n    _onPanResponderMove = (event, gestureState) => {\n        let touchPonitX = gestureState.moveX;\n        let progress;\n        if (touchPonitX < 20)\n            progress = 0;\n        else {\n            if (touchPonitX > (totalWidth - 20))\n                progress = 1;\n            else\n                progress = (touchPonitX - 20) \/ (totalWidth - 40);\n        }\n        this.setState({ progress });\n    }\n\n    render() {\n        return (\n        <View style={styles.container}>\n            <ProgressViewIOS\n                style={styles.ProgressViewStyle}\n                progress={this.state.progress}\n                \/>\n            <Text style={styles.textStyle}>\u8fdb\u5ea6\uff1a{Math.round(this.state.progress * 100) }%<\/Text>\n            \/\/\u624b\u52bf\u76d1\u89c6\u533a\u57df\n            <View style={styles.touchViewStyle}\n                {...this.watcher.panHandlers} \/>\n            <\/View>\n        );\n    }\n}\n\nconst styles = StyleSheet.create({\n    container: {\n        flex: 1,\n    },\n    ProgressViewStyle: {\n        width: totalWidth - 40,\n        left: 20,\n        top: 50,\n    },\n    touchViewStyle: {\n        width: totalWidth - 20,\n        height: 40,\n        backgroundColor: 'transparent',\n        position: 'absolute',\n        left: 10,\n        top: 32,\n    },\n    textStyle: {\n        fontSize: 30,\n        left: 20,\n        top: 70,\n    },\n});\n\nAppRegistry.registerComponent('RNAPP', () => RNAPP);<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"
    PanResponder\u57fa\u672c\u4ecb\u7ecd PanResponder\uff1a\u5e73\u5e95\u9505\u7684\u54cd\u5e94\u8005\u3002PanResponder\u7c7b\u53ef\u4ee5\u5c06\u591a […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[163],"tags":[],"class_list":["post-514","post","type-post","status-publish","format-standard","hentry","category-react-native"],"_links":{"self":[{"href":"https:\/\/www.appblog.cn\/index.php\/wp-json\/wp\/v2\/posts\/514","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.appblog.cn\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.appblog.cn\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.appblog.cn\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.appblog.cn\/index.php\/wp-json\/wp\/v2\/comments?post=514"}],"version-history":[{"count":0,"href":"https:\/\/www.appblog.cn\/index.php\/wp-json\/wp\/v2\/posts\/514\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.appblog.cn\/index.php\/wp-json\/wp\/v2\/media?parent=514"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.appblog.cn\/index.php\/wp-json\/wp\/v2\/categories?post=514"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.appblog.cn\/index.php\/wp-json\/wp\/v2\/tags?post=514"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}