{"id":488,"date":"2023-02-25T14:07:08","date_gmt":"2023-02-25T06:07:08","guid":{"rendered":"https:\/\/www.appblog.cn\/?p=488"},"modified":"2023-04-29T20:51:35","modified_gmt":"2023-04-29T12:51:35","slug":"react-native-learning-touchable-class-components","status":"publish","type":"post","link":"https:\/\/www.appblog.cn\/index.php\/2023\/02\/25\/react-native-learning-touchable-class-components\/","title":{"rendered":"React Native\u5b66\u4e60\u4e4bTouchable\u7c7b\u7ec4\u4ef6"},"content":{"rendered":"

React Native\u6ca1\u6709\u50cfWeb\u5f00\u53d1\u90a3\u6837\u7ed9\u5143\u7d20\u7ed1\u5b9aclick\u4e8b\u4ef6\uff0c\u524d\u9762\u8bb2\u7684Text\u7ec4\u4ef6\u6709onPress\u4e8b\u4ef6\u56de\u8c03\uff0cView\u7ec4\u4ef6\u662f\u6ca1\u6709\u7684\uff0c\u4f46\u662f\u5728\u5b9e\u9645\u9879\u76ee\u5f00\u53d1\u4e2d\uff0c\u5f88\u591a\u5176\u4ed6\u7684\u7ec4\u4ef6\u4e5f\u662f\u9700\u8981\u53ef\u4ee5\u88ab\u70b9\u51fb\u7684\uff0cRN\u63d0\u4f9b\u4e863\u4e2a\u7ec4\u4ef6\u6765\u8d4b\u4e88\u88ab\u70b9\u51fb\u7684\u80fd\u529b\uff08\u53bb\u5305\u88f9\u5176\u4ed6\u7ec4\u4ef6\u5373\u53ef\uff09\uff0c\u8fd93\u4e2a\u7ec4\u4ef6\u88ab\u79f0\u4e3a\u201cTouchable\u7c7b\u7ec4\u4ef6\u201d\u3002<\/p>\n

<\/p>\n

TouchableHighlight \u9ad8\u4eae<\/h3>\n

\u5c5e\u6027\uff1aactiveOpacity<\/code>(\u8bbe\u7f6e\u900f\u660e\u5ea6)\u3001onHideUnderlay<\/code>\u3001onShowUnderlay<\/code>\u3001underlayColor<\/code>(\u70b9\u51fb\u65f6\u80cc\u666f\u9634\u5f71\u6548\u679c\u7684\u80cc\u666f\u989c\u8272)<\/p>\n

TouchableOpacity \u900f\u660e\u5ea6<\/h3>\n

\u5c5e\u6027\uff1aactiveOpacity<\/code><\/p>\n

TouchableWithoutFeedback \u65e0\u53cd\u9988 \u4e0d\u4f1a\u51fa\u73b0\u4efb\u4f55\u89c6\u89c9\u53d8\u5316<\/h3>\n

\u5c5e\u6027\uff1aonLongPress<\/code>\u3001onPressIn<\/code>\u3001onPressOut<\/code>\uff0c\u4e0d\u5efa\u8bae\u4f7f\u7528<\/p>\n

\u5728app\u4e2d\u6211\u4eec\u5e0c\u671b\u70b9\u51fb\u7684\u65f6\u5019\u4f1a\u6709\u4e00\u4e9b\u89c6\u89c9\u4e0a\u7684\u53d8\u5316\uff0c\u8fd9\u4e2a\u53d8\u5316\u4f1a\u63d0\u9192\u6211\u4eec\u5df2\u7ecf\u70b9\u51fb\u8fc7\u4e86\uff0c\u4ece\u800c\u907f\u514d\u91cd\u590d\u70b9\u51fb<\/p>\n

\u6e90\u7801\uff1a<\/p>\n

\/**\n * Sample React Native App\n * https:\/\/github.com\/facebook\/react-native\n *\/\n'use strict';\n\nimport React, { Component } from 'react';\nimport {\n    AppRegistry,\n    StyleSheet,\n    PixelRatio,\n    Text,\n    TouchableHighlight,\n    TouchableOpacity,\n    TouchableWithoutFeedback,\n    View\n} from 'react-native';\n\nvar onePT = 1 \/ PixelRatio.get();\n\nclass RNAPP extends Component {\n    render() {\n        return (\n            <View style={styles.flex}>\n                <TouchableHighlight onPress={this.show.bind(this, '\u6b22\u8fce\u5b66\u4e60React Native\u6280\u672f')} underlayColor='#E1F6FF'>\n                    <Text style={styles.item}>\u6b22\u8fce\u5b66\u4e60React Native\u6280\u672f-TouchableHighlight<\/Text>\n                <\/TouchableHighlight>\n\n                <TouchableOpacity onPress={this.show.bind(this, '\u6b22\u8fce\u5b66\u4e60React Native\u6280\u672f')}>\n                    <Text style={styles.item}>\u6b22\u8fce\u5b66\u4e60React Native\u6280\u672f-TouchableOpacity<\/Text>\n                <\/TouchableOpacity>\n\n                <TouchableWithoutFeedback onPress={this.show.bind(this, '\u6b22\u8fce\u5b66\u4e60React Native\u6280\u672f')}>\n                    <Text style={styles.item}>\u6b22\u8fce\u5b66\u4e60React Native\u6280\u672f-TouchableWithoutFeedback<\/Text>\n                <\/TouchableWithoutFeedback>\n        <\/View>\n        );\n    }\n\n    show(txt){\n        alert(txt);\n    }\n}\n\nconst styles = StyleSheet.create({\n    flex:{\n        flex:1,\n        marginTop:25,\n    },\n\n    item:{\n        fontSize:18,\n        color:'#434343',\n        marginLeft:5,\n        marginTop:10,\n    },\n});\n\nAppRegistry.registerComponent('RNAPP', () => RNAPP);<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"
React Native\u6ca1\u6709\u50cfWeb\u5f00\u53d1\u90a3\u6837\u7ed9\u5143\u7d20\u7ed1\u5b9aclick\u4e8b\u4ef6\uff0c\u524d\u9762\u8bb2\u7684Text\u7ec4\u4ef6\u6709onPress\u4e8b\u4ef6 […]<\/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-488","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\/488","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=488"}],"version-history":[{"count":0,"href":"https:\/\/www.appblog.cn\/index.php\/wp-json\/wp\/v2\/posts\/488\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.appblog.cn\/index.php\/wp-json\/wp\/v2\/media?parent=488"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.appblog.cn\/index.php\/wp-json\/wp\/v2\/categories?post=488"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.appblog.cn\/index.php\/wp-json\/wp\/v2\/tags?post=488"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}