\u5728\u524d\u6587\u4ee3\u7801\u7684\u57fa\u7840\u4e0a\uff0c\u5206\u6790\u8def\u7531\u6808\u7684\u7ed3\u6784\uff1aHome -> Gouwu<\/p>\n
\u6808\uff1a\u5148\u8fdb\u540e\u51fa\uff0c\u540e\u8fdb\u5148\u51fa<\/p>\n
<\/p>\n
\u70b9\u51fb\u8fd4\u56de\u952e\u8fd4\u56de\u4e0a\u4e00\u7ea7\u9875\u9762\u5173\u952e\u4ee3\u7801\uff1a<\/p>\n
componentWillMount() {\n if (Platform.OS === 'android') {\n BackAndroid.addEventListener('hardwareBackPress', this.onBackAndroid);\n }\n}\n\ncomponentWillUnmount() {\n if (Platform.OS === 'android') {\n BackAndroid.removeEventListener('hardwareBackPress', this.onBackAndroid);\n }\n}\n\nonBackAndroid = () => {\n const { navigator } = this.props;\n const routers = navigator.getCurrentRoutes();\n console.log('\u5f53\u524d\u8def\u7531\u957f\u5ea6\uff1a'+routers.length);\n if (routers.length > 1) {\n navigator.pop();\n return true; \/\/\u63a5\u7ba1\u9ed8\u8ba4\u884c\u4e3a\n }\n return false; \/\/\u9ed8\u8ba4\u884c\u4e3a\n};<\/code><\/pre>\n\n\u9700\u8981\u6ce8\u610f\u7684\u662f\uff0c\u4e0d\u8bba\u662fbind\u65b9\u5f0f\u8fd8\u662f\u7bad\u5934\u51fd\u6570\uff0c\u6bcf\u6b21\u88ab\u6267\u884c\u90fd\u8fd4\u56de\u7684\u662f\u4e00\u4e2a\u65b0\u7684\u51fd\u6570\u5f15\u7528\uff0c\u56e0\u6b64\u5982\u679c\u8fd8\u9700\u8981\u4f7f\u7528\u51fd\u6570\u7684\u5f15\u7528\u53bb\u505a\u4e00\u4e9b\u522b\u7684\u4e8b\u60c5\uff08\u8b6c\u5982\u5378\u8f7d\u76d1\u542c\u5668\uff09\uff0c\u90a3\u4e48\u5fc5\u987b\u624b\u52a8\u4fdd\u5b58\u8fd9\u4e2a\u5f15\u7528\u3002<\/p>\n<\/blockquote>\n
\/\/ \u9519\u8bef\u7684\u505a\u6cd5\nclass PauseMenu extends React.Component {\n componentWillMount() {\n AppStateIOS.addEventListener('change', this.onAppPaused.bind(this));\n }\n componentDidUnmount() {\n AppStateIOS.removeEventListener('change', this.onAppPaused.bind(this));\n }\n onAppPaused(event) {\n }\n}<\/code><\/pre>\n\/\/ \u6b63\u786e\u7684\u505a\u6cd51\nclass PauseMenu extends React.Component {\n constructor(props) {\n super(props);\n this._onAppPaused = this.onAppPaused.bind(this);\n }\n componentWillMount() {\n AppStateIOS.addEventListener('change', this._onAppPaused);\n }\n componentDidUnmount() {\n AppStateIOS.removeEventListener('change', this._onAppPaused);\n }\n onAppPaused(event) {\n }\n}<\/code><\/pre>\n\/\/ \u6b63\u786e\u7684\u505a\u6cd52\nclass PauseMenu extends React.Component{\n componentWillMount() {\n AppStateIOS.addEventListener('change', this.onAppPaused);\n }\n componentDidUnmount() {\n AppStateIOS.removeEventListener('change', this.onAppPaused);\n }\n onAppPaused = (event) => {\n \/\/\u628a\u65b9\u6cd5\u76f4\u63a5\u4f5c\u4e3a\u4e00\u4e2aarrow function\u7684\u5c5e\u6027\u6765\u5b9a\u4e49\uff0c\u521d\u59cb\u5316\u7684\u65f6\u5019\u5c31\u7ed1\u5b9a\u597d\u4e86this\u6307\u9488\n }\n}<\/code><\/pre>\n\u7279\u522b\u8bf4\u660e<\/p>\n
\n- BackAndroid\u5728iOS\u5e73\u53f0\u4e0b\u662f\u4e00\u4e2a\u7a7a\u5b9e\u73b0\uff0c\u6240\u4ee5\u7406\u8bba\u4e0a\u4e0d\u505a\u8fd9\u4e2a
Platform.OS === 'android'<\/code>\u5224\u65ad\u4e5f\u662f\u5b89\u5168\u7684\u3002<\/li>\n- \u5982\u679c\u6240\u6709\u4e8b\u4ef6\u76d1\u542c\u51fd\u6570\u4e2d\uff0c\u6ca1\u6709\u4efb\u4f55\u4e00\u4e2a\u8fd4\u56de\u771f\u503c\uff0c\u5c31\u4f1a\u8c03\u7528\u9ed8\u8ba4\u884c\u4e3a\u3002<\/li>\n<\/ul>\n
\u7279\u522b\u6ce8\u610f<\/strong><\/p>\n\u65e0\u8bba\u5728Home\u9875\u9762\u4e2d\u8c03\u7528\uff0c\u8fd8\u662f\u5728Gouwu\u9875\u9762\u4e2d\u8c03\u7528\u201c\u70b9\u51fb\u8fd4\u56de\u952e\u8fd4\u56de\u4e0a\u4e00\u7ea7\u9875\u9762\u4ee3\u7801\u201d\uff0cnavigator\u662f\u540c\u4e00\u4e2a\uff0c\u8fd9\u4e2a\u4e8b\u4ef6\u5728\u6700\u5916\u5c42\u6ce8\u518c\u5c31\u884c\uff08\u4e0d\u662finitialRoute\u7684\u7ec4\u4ef6\uff0c\u662fAppRegistry\u7684\u7ec4\u4ef6\uff09\u3002\u5426\u5219\u5982\u679c\u5728Home\u9875\u9762\u548cGouwu\u9875\u9762\u5206\u522b\u8c03\u7528\uff0c\u4f1a\u5bfc\u81f4\u8c03\u7528\u591a\u6b21pop\uff0c\u8fd9\u4e2a\u4ee3\u7801\u63a5\u7ba1\u7684\u662f\u6574\u4e2a\u5e94\u7528\u7684\u540e\u9000\u952e\u3002<\/strong><\/p>\naddEventListener()<\/code>\u7b2c\u4e09\u4e2a\u53c2\u6570useCapture (Boolean)<\/code>\u8be6\u7ec6\u89e3\u6790\uff1a<\/p>\n\n- true \u7684\u89e6\u53d1\u987a\u5e8f\u603b\u662f\u5728 false \u4e4b\u524d\uff1b<\/li>\n
- \u5982\u679c\u591a\u4e2a\u5747\u4e3a true\uff0c\u5219\u5916\u5c42\u7684\u89e6\u53d1\u5148\u4e8e\u5185\u5c42\uff1b<\/li>\n
- \u5982\u679c\u591a\u4e2a\u5747\u4e3a false\uff0c\u5219\u5185\u5c42\u7684\u89e6\u53d1\u5148\u4e8e\u5916\u5c42\u3002<\/li>\n<\/ul>\n
\u4f8b\u5b50\uff1a\u201c\u518d\u6309\u4e00\u6b21\u9000\u51fa\u5e94\u7528\u201d<\/p>\n
onBackAndroid = () => {\n const navigator = this.refs.navigator;\n const routers = navigator.getCurrentRoutes();\n console.log('\u5f53\u524d\u8def\u7531\u957f\u5ea6\uff1a' + routers.length);\n if (routers.length > 1) {\n navigator.pop();\n return true; \/\/\u63a5\u7ba1\u9ed8\u8ba4\u884c\u4e3a\n } else {\n if (this.lastBackPressed && this.lastBackPressed + 2000 >= Date.now()) {\n \/\/\u6700\u8fd12\u79d2\u5185\u6309\u8fc7back\u952e\uff0c\u53ef\u4ee5\u9000\u51fa\u5e94\u7528\u3002\n return false;\n }\n this.lastBackPressed = Date.now();\n ToastAndroid.show('\u518d\u6309\u4e00\u6b21\u9000\u51fa\u5e94\u7528', ToastAndroid.SHORT);\n return true;\n }\n return false; \/\/\u9ed8\u8ba4\u884c\u4e3a\n};<\/code><\/pre>\n\u7279\u6b8a\u76d1\u542c\u4e8b\u4ef6<\/h2>\n\u5ef6\u65f6\u52a8\u4f5c<\/h3>\n
\u6211\u4eec\u5728\u76d1\u542c\u51fd\u6570\u4e2d\u4e0d\u80fd\u51b3\u5b9a\u662f\u5426\u8981\u8c03\u7528\u9ed8\u8ba4\u884c\u4e3a\uff0c\u8981\u7b49\u5f85\u4e00\u4e2a\u5f02\u6b65\u64cd\u4f5c\u4e4b\u540e\u624d\u8c03\u7528\u9ed8\u8ba4\u884c\u4e3a\uff0c\u6b64\u65f6\u53ef\u4ee5\u4f7f\u7528BackAndroid.exitApp()\u6765\u9000\u51fa\u5e94\u7528\uff0c\u901a\u8fc7\u4ee5\u4e0b\u4e24\u79cd\u529e\u6cd5\uff1a<\/p>\n
\u4f8b\u5b50\uff1a\u5728\u9000\u51fa\u5e94\u7528\u4e4b\u524d\u4fdd\u5b58\u6570\u636e<\/p>\n
\u5199\u6cd51\uff1a<\/p>\n
onBackAndroid = () => {\n saveData().then(() => {\n BackAndroid.exitApp();\n });\n return true;\n}<\/code><\/pre>\n\u5728\u76d1\u542c\u51fd\u6570\u4e2d\uff0c\u6211\u4eec\u5f00\u59cb\u5f02\u6b65\u4e8b\u4ef6\uff0c\u5e76\u76f4\u63a5return true\u3002\u6b64\u65f6\u9ed8\u8ba4\u884c\u4e3a\u4e0d\u4f1a\u88ab\u8c03\u7528\u3002\u5f53\u4fdd\u5b58\u5b8c\u6bd5\u540e\uff0c\u6211\u4eec\u8c03\u7528exitApp()\uff0c\u89e6\u53d1\u9ed8\u8ba4\u884c\u4e3a\uff0c\u9000\u51fa\u5e94\u7528\u3002<\/p>\n
\u5199\u6cd52\uff1a<\/p>\n
onBackAndroid = async () => {\n await saveData();\n BackAndroid.exitApp();\n}<\/code><\/pre>\n\u8fd9\u91cc\u6211\u4eec\u7528\u4e86async\u51fd\u6570\uff0casync \u51fd\u6570\u603b\u662f\u8fd4\u56de\u4e00\u4e2aPromise\uff0cPromise\u4f5c\u4e3a\u4e00\u4e2a\u5bf9\u8c61\uff0c\u4e5f\u88ab\u8ba4\u4e3a\u662f\u4e00\u4e2a\u201c\u771f\u503c\u201d\uff0c\u6240\u4ee5\u8fd9\u79cd\u60c5\u51b5\u4e0b\u9ed8\u8ba4\u884c\u4e3a\u603b\u662f\u4e0d\u4f1a\u88ab\u8c03\u7528\u3002\u5f53\u4fdd\u5b58\u5b8c\u6bd5\u540e\uff0c\u6211\u4eec\u8c03\u7528exitApp()\uff0c\u89e6\u53d1\u9ed8\u8ba4\u884c\u4e3a\uff0c\u9000\u51fa\u5e94\u7528\u3002<\/p>\n
\u591a\u6837\u52a8\u4f5c<\/h3>\n
\u4f8b\u5b50\uff1a\u6839\u636e\u5f53\u524d\u754c\u9762\u51b3\u5b9a\u4f5c\u4f55\u52a8\u4f5c<\/p>\n
\u6709\u65f6\u5019\u6211\u4eec\u6709\u8fd9\u6837\u7684\u9700\u6c42\uff1a\u5f53\u7528\u6237\u5904\u4e8e\u67d0\u4e9b\u754c\u9762\u4e0b\u65f6\uff0cback\u952e\u8981\u505a\u7279\u6b8a\u7684\u52a8\u4f5c\uff0c\u5982\uff1a\u63d0\u793a\u7528\u6237\u662f\u5426\u8981\u4fdd\u5b58\u6570\u636e\uff0c\u6216\u8005\u89e3\u9501\u754c\u9762\u7981\u6b62back\u952e\u8fd4\u56de\u7b49\u7b49\u3002\u6b64\u65f6\uff0c\u6700\u4f73\u5b9e\u8df5\u662f\u5728route\u6216route\u4e2d\u5bf9\u5e94\u7684Component\u4e0a\u4fdd\u5b58\u5173\u4e8e\u5982\u4f55\u5904\u7406back\u952e\u7684\u4fe1\u606f\uff1a<\/p>\n
onBackAndroid = () => {\n const nav = this.navigator;\n const routers = nav.getCurrentRoutes();\n if (routers.length > 1) {\n const top = routers[routers.length - 1];\n if (top.ignoreBack || top.component.ignoreBack) {\n \/\/ \u8def\u7531\u6216\u7ec4\u4ef6\u4e0a\u51b3\u5b9a\u8fd9\u4e2a\u754c\u9762\u5ffd\u7565back\u952e\n return true;\n }\n const handleBack = top.handleBack || top.component.handleBack;\n if (handleBack) {\n \/\/ \u8def\u7531\u6216\u7ec4\u4ef6\u4e0a\u51b3\u5b9a\u8fd9\u4e2a\u754c\u9762\u81ea\u884c\u5904\u7406back\u952e\n return handleBack();\n }\n \/\/ \u9ed8\u8ba4\u884c\u4e3a\uff1a\u9000\u51fa\u5f53\u524d\u754c\u9762\u3002\n nav.pop();\n return true;\n }\n return false;\n};<\/code><\/pre>\n\u5168\u90e8\u4ee3\u7801\uff1a<\/p>\n
\/**\n * Sample React Native App\n * https:\/\/github.com\/facebook\/react-native\n *\/\n\nimport React, { Component } from 'react';\nimport {\n AppRegistry,\n StyleSheet,\n Text,\n Navigator,\n ScrollView,\n Image,\n AsyncStorage,\n TouchableOpacity,\n View,\n Platform,\n BackAndroid,\n ToastAndroid,\n} from 'react-native';\n\nimport Dimensions from 'Dimensions';\n\nconst width = Dimensions.get('window').width;\nconst height = Dimensions.get('window').height;\n\nconst Model = [\n {\n id: '1',\n title: '\u7ea2\u5fc3\u7315\u7334\u6843',\n desc: '12\u4e2a\u88c570-90g\/\u4e2a',\n price: 49,\n url: 'http:\/\/note.youdao.com\/yws\/api\/personal\/file\/62EAF0C6AC8142EA89B11A71BB6C8AEC?method=download&inline=true&shareKey=e6b1c5b1307f752c9e4925056a4facd9',\n },\n {\n id: '2',\n title: '\u7ea2\u5bcc\u58eb\u82f9\u679c',\n desc: '5kg\u679c\u5f8480-85mm',\n price: 109,\n url: 'http:\/\/note.youdao.com\/yws\/api\/personal\/file\/E38B11859CB2496190BF5A559D9E68B5?method=download&inline=true&shareKey=1dabf3633a1051e9f5d2d7470fd91c0b',\n },\n {\n id: '3',\n title: '\u54c8\u5bc6\u74dc',\n desc: '2\u4e2a\u88c51.4kg\u4ee5\u4e0a\/\u4e2a',\n price: 42,\n url: 'http:\/\/note.youdao.com\/yws\/api\/personal\/file\/F443648C199346FDA7E48AE88D0D00A2?method=download&inline=true&shareKey=89fdcc577f98ecdddfcf03f575767381',\n },\n {\n id: '4',\n title: '\u9752\u8292',\n desc: '1kg500g\u4ee5\u4e0a\/\u4e2a',\n price: 28,\n url: 'http:\/\/note.youdao.com\/yws\/api\/personal\/file\/8F7B83A47CA94435A2132DC0341AECC3?method=download&inline=true&shareKey=d679e8800b5678f9c673538b93dc0fbc',\n },\n {\n id: '5',\n title: '\u9ed1\u73cd\u73e0\u8461\u8404',\n desc: '1kg\u88c5',\n price: 32,\n url: 'http:\/\/note.youdao.com\/yws\/api\/personal\/file\/AF297F8C75714DE481E87C6F09D97649?method=download&inline=true&shareKey=8f89c3673e8851efb20abccce2214fbf',\n },\n {\n id: '6',\n title: '\u7ea2\u5fc3\u706b\u9f99\u679c',\n desc: '2.5kg\u88c5250-350g\/\u4e2a',\n price: 59.9,\n url: 'http:\/\/note.youdao.com\/yws\/api\/personal\/file\/B67D0D453865459594C0FDC6CDE95A79?method=download&inline=true&shareKey=3bc5b3b1ee9f13e3a7ebdd251d117796',\n },\n];\n\nclass RNAPP extends Component {\n render() {\n let defaultName = 'Home';\n let defaultComponent = Home;\n return (\n <Navigator\n initialRoute = {{ name: defaultName, component: defaultComponent }}\n ref = "navigator"\n \/\/\u914d\u7f6e\u573a\u666f\n configureScene = {\n (route) => {\n \/\/\u8fd9\u4e2a\u662f\u9875\u9762\u4e4b\u95f4\u8df3\u8f6c\u65f6\u5019\u7684\u52a8\u753b\uff0c\u5177\u4f53\u6709\u54ea\u4e9b\uff1f\u53ef\u4ee5\u770b\u8fd9\u4e2a\u76ee\u5f55\u4e0b\uff0c\u6709\u6e90\u4ee3\u7801\u7684: node_modules\/react-native\/Libraries\/CustomComponents\/Navigator\/NavigatorSceneConfigs.js\n return Navigator.SceneConfigs.VerticalDownSwipeJump;\n }\n }\n renderScene = {\n (route, navigator) => {\n let Component = route.component;\n return <Component {...route.params} navigator={navigator} \/>\n }\n }\n \/>\n );\n }\n\n componentWillMount() {\n if (Platform.OS === 'android') {\n BackAndroid.addEventListener('hardwareBackPress', this.onBackAndroid);\n \/\/BackAndroid.addEventListener('hardwareBackPress', this.onBackAndroid, true);\n }\n }\n\n componentWillUnmount() {\n if (Platform.OS === 'android') {\n BackAndroid.removeEventListener('hardwareBackPress', this.onBackAndroid);\n }\n }\n\n onBackAndroid = () => {\n const navigator = this.refs.navigator;\n const routers = navigator.getCurrentRoutes();\n console.log('\u5f53\u524d\u8def\u7531\u957f\u5ea6\uff1a' + routers.length);\n if (routers.length > 1) {\n navigator.pop();\n return true; \/\/\u63a5\u7ba1\u9ed8\u8ba4\u884c\u4e3a\n } else {\n if (this.lastBackPressed && this.lastBackPressed + 2000 >= Date.now()) {\n \/\/\u6700\u8fd12\u79d2\u5185\u6309\u8fc7back\u952e\uff0c\u53ef\u4ee5\u9000\u51fa\u5e94\u7528\u3002\n return false;\n }\n this.lastBackPressed = Date.now();\n ToastAndroid.show('\u518d\u6309\u4e00\u6b21\u9000\u51fa\u5e94\u7528', ToastAndroid.SHORT);\n return true;\n }\n return false; \/\/\u9ed8\u8ba4\u884c\u4e3a\n };\n}\n\nclass Home extends Component {\n render() {\n return (\n <List navigator={this.props.navigator} \/>\n );\n }\n}\n\nclass Item extends Component {\n static defaultProps = {\n url: '',\n title: '\u9ed8\u8ba4\u6807\u9898',\n };\n\n static propTypes = {\n url: React.PropTypes.string.isRequired,\n title: React.PropTypes.string.isRequired,\n };\n\n render() {\n return (\n <View style={styles.item}>\n <TouchableOpacity onPress={this.props.press}>\n <Image\n resizeMode='stretch'\n style={styles.img}\n source={{ uri: this.props.url }}\n >\n <Text numberOfLines={1} style={styles.item_text}>{this.props.title}<\/Text>\n <\/Image>\n <\/TouchableOpacity>\n <\/View>\n );\n }\n}\n\nclass List extends Component {\n constructor(props) {\n super(props);\n this.state = {\n count: 0,\n };\n }\n\n render() {\n let list = [];\n for (let i in Model) {\n if (i % 2 === 0) {\n \/\/\u4e24\u4e2a\u7b49\u53f7\uff1a\u4e0d\u5224\u65ad\u7c7b\u578b\n \/\/\u4e09\u4e2a\u7b49\u53f7\uff1a\u5224\u65ad\u7c7b\u578b\n let row = (\n <View style={styles.row} key={i}>\n <Item\n title={Model[i].title}\n url={Model[i].url}\n press={this.press.bind(this, Model[i]) }\n >\n <\/Item>\n <Item\n title={Model[parseInt(i) + 1].title}\n url={Model[parseInt(i) + 1].url}\n press={this.press.bind(this, Model[parseInt(i) + 1]) }\n >\n <\/Item>\n <\/View>\n );\n list.push(row);\n }\n }\n\n let count = this.state.count;\n let str = null;\n if (count) {\n str = ', \u5171' + count + '\u4ef6\u5546\u54c1';\n }\n console.log('count=' + count);\n\n return (\n <ScrollView style={{ marginTop: 10 }}>\n {list}\n <Text onPress={this.goGouWu.bind(this) } style={styles.btn}>\u53bb\u7ed3\u7b97{str}<\/Text>\n <\/ScrollView>\n );\n }\n\n goGouWu() {\n \/\/alert('\u70b9\u51fb\u4e86\u53bb\u8d2d\u7269\u8f66');\n const { navigator } = this.props;\n \/\/\u4e3a\u4ec0\u4e48\u8fd9\u91cc\u53ef\u4ee5\u53d6\u5f97 props.navigator?\u8bf7\u770b\u4e0a\u6587:\n \/\/<Component {...route.params} navigator={navigator} \/>\n \/\/\u8fd9\u91cc\u4f20\u9012\u4e86navigator\u4f5c\u4e3aprops\n const _that = this;\n if (navigator) {\n navigator.push({\n name: 'GouWu',\n component: GouWu,\n params:{\n getCount: function(count) {\n _that.setState({\n count: count,\n });\n console.log('\u53c2\u6570\u4f20\u56de');\n },\n },\n })\n }\n }\n\n press(data) {\n this.setState({\n count: this.state.count + 1,\n });\n \/\/AsyncStorage\u5f02\u6b65\u5b58\u50a8\n AsyncStorage.setItem('SP-' + this.genId() + '-SP', JSON.stringify(data), function (err) {\n if (err) {\n \/\/TODO\uff1a\u5b58\u50a8\u51fa\u9519\n alert(err);\n } else {\n \/\/alert('\u4fdd\u5b58\u6210\u529f');\n }\n });\n }\n\n \/\/\u751f\u6210\u968f\u673aID\uff1aGUID \u5168\u5c40\u552f\u4e00\u6807\u8bc6\u7b26\uff08GUID\uff0cGlobally Unique Identifier\uff09\u662f\u4e00\u79cd\u7531\u7b97\u6cd5\u751f\u6210\u7684\u4e8c\u8fdb\u5236\u957f\u5ea6\u4e3a128\u4f4d\u7684\u6570\u5b57\u6807\u8bc6\u7b26\n \/\/GUID\u751f\u6210\u7684\u4ee3\u7801\u6765\u81ea\u4e8eStoyan Stefanov\n genId() {\n return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(\/[xy]\/g, function(c) {\n let r = Math.random()*16|0, v = c == 'x' ? r : (r&0x3|0x8);\n return v.toString(16);\n }).toUpperCase();\n }\n\n componentDidMount() {\n let _that = this;\n AsyncStorage.getAllKeys(\n function (err, keys) {\n if (err) {\n \/\/TODO:\u5b58\u50a8\u53d6\u6570\u636e\u51fa\u9519\n \/\/\u7ed9\u7528\u6237\u63d0\u793a\u9519\u8bef\u4fe1\u606f\n console.log(err);\n } else {\n console.log('\u8bfb\u53d6\u6210\u529f\u7684\u4e2a\u6570\uff1a'+keys.toString());\n }\n _that.setState({\n count: keys.length,\n });\n }\n );\n }\n}\n\nclass GouWu extends Component {\n constructor(props) {\n super(props);\n this.state = {\n price: 0,\n data: [],\n };\n }\n\n render() {\n \/\/\u7b2c\u4e8c\u6b21render\u7684\u65f6\u5019 data\u4e0d\u4e3a\u7a7a\n let data = this.state.data;\n let price = this.state.price;\n let list = [];\n for (let i in data) {\n price += parseFloat(data[i].price);\n list.push(\n <View style={[styles.row, styles.list_item]} key={i}>\n <Text style={styles.list_item_desc}>\n {data[i].title}\n {data[i].desc}\n <\/Text>\n <Text style={styles.list_item_price}>\u4eba\u6c11\u5e01: {data[i].price}<\/Text>\n <\/View>\n );\n }\n\n let str = null;\n if (price) {\n str = ', \u5171' + price.toFixed(2) + '\u5143';\n }\n\n return (\n <ScrollView style={{ marginTop: 10 }}>\n {list}\n <Text style={styles.btn} onPress={this.paySuccess.bind(this)} >\u652f\u4ed8{str}<\/Text>\n <Text style={styles.clear} onPress={this.clearStorage.bind(this) }>\u6e05\u7a7a\u8d2d\u7269\u8f66<\/Text>\n <\/ScrollView>\n );\n }\n\n componentDidMount() {\n let _that = this;\n AsyncStorage.getAllKeys(\n function (err, keys) {\n if (err) {\n \/\/TODO \u5b58\u50a8\u6570\u636e\u51fa\u9519\n return;\n }\n \/\/keys\u662f\u5b57\u7b26\u4e32\u6570\u7ec4\n AsyncStorage.multiGet(keys, function (err, result) {\n \/\/\u5f97\u5230\u7684\u7ed3\u6784\u662f\u4e8c\u7ef4\u6570\u7ec4\n \/\/result[i][0]\u8868\u793a\u6211\u4eec\u5b58\u50a8\u7684\u952e\uff0cresult[i][1]\u8868\u793a\u6211\u4eec\u5b58\u50a8\u7684\u503c\n let arr = [];\n for (let i in result) {\n arr.push(JSON.parse(result[i][1]));\n }\n\n _that.setState({\n data: arr,\n });\n });\n }\n );\n }\n\n paySuccess() {\n var _that = this;\n AsyncStorage.clear(function(err){\n if (!err) {\n _that.setState({\n data: [],\n price: 0,\n });\n\n const { navigator } = _that.props;\n if (_that.props.getCount) {\n _that.props.getCount(0);\n }\n\n alert("\u652f\u4ed8\u6210\u529f\uff01")\n\n if (navigator) {\n navigator.pop();\n }\n \/\/_that.props.navigator.pop();\n }\n });\n }\n\n clearStorage() {\n let _that = this;\n AsyncStorage.clear(function (err) {\n if (!err) {\n _that.setState({\n data: [],\n price: 0,\n });\n alert('\u8d2d\u7269\u8f66\u5df2\u7ecf\u6e05\u7a7a');\n }\n });\n }\n}\n\nconst styles = StyleSheet.create({\n list_item: {\n marginLeft: 5,\n marginRight: 5,\n padding: 5,\n borderWidth: 1,\n height: 32,\n borderRadius: 3,\n borderColor: '#ddd',\n },\n list_item_desc: {\n flex: 2,\n fontSize: 15,\n },\n list_item_price: {\n flex: 1,\n fontSize: 15,\n textAlign: 'right',\n },\n clear: {\n marginTop: 10,\n backgroundColor: '#FF7200',\n color: '#fff',\n borderWidth: 1,\n borderColor: '#ddd',\n marginLeft: 10,\n marginRight: 10,\n lineHeight: 24,\n height: 33,\n fontSize: 18,\n textAlign: 'center',\n textAlignVertical: 'center',\n },\n btn: {\n flex: 1,\n backgroundColor: '#FF7200',\n height: 33,\n textAlign: 'center',\n textAlignVertical: 'center',\n color: '#fff',\n marginLeft: 10,\n marginRight: 10,\n lineHeight: 24,\n marginTop: 40,\n fontSize: 18,\n },\n row: {\n flexDirection: 'row',\n marginBottom: 10,\n },\n img: {\n flex: 1,\n backgroundColor: 'transparent',\n },\n item_text: {\n backgroundColor: '#000',\n opacity: 0.7,\n color: '#fff',\n height: 25,\n lineHeight: 18,\n textAlign: 'center',\n marginTop: 94,\n },\n item: {\n flex: 1,\n marginLeft: 5,\n borderWidth: 1,\n borderColor: '#ddd',\n marginRight: 5,\n height: 120,\n },\n list: {\n justifyContent: 'flex-start',\n flexDirection: 'row',\n flexWrap: 'wrap'\n },\n container: {\n\n flex: 1,\n },\n listView: {\n paddingTop: 20,\n backgroundColor: '#F5FCFF',\n },\n thumbnail: {\n width: 80,\n height: 80,\n borderRadius: 16,\n },\n \/\/\u4f7frightContainer\u5728\u7236\u5bb9\u5668\u4e2d\u5360\u636eImage\u4e4b\u5916\u5269\u4e0b\u7684\u5168\u90e8\u7a7a\u95f4\n container1: {\n flex: 1,\n justifyContent: 'center',\n alignItems: 'center',\n },\n title: {\n fontSize: 14,\n marginBottom: 8,\n },\n year: {\n fontSize: 14,\n },\n});\n\nAppRegistry.registerComponent('RNAPP', () => RNAPP);<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"\u57fa\u672c\u4f7f\u7528 \u5728\u524d\u6587\u4ee3\u7801\u7684\u57fa\u7840\u4e0a\uff0c\u5206\u6790\u8def\u7531\u6808\u7684\u7ed3\u6784\uff1aHome -> Gouwu \u6808\uff1a\u5148\u8fdb\u540e\u51fa\uff0c\u540e\u8fdb\u5148\u51fa \u70b9\u51fb […]<\/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-505","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\/505","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=505"}],"version-history":[{"count":0,"href":"https:\/\/www.appblog.cn\/index.php\/wp-json\/wp\/v2\/posts\/505\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.appblog.cn\/index.php\/wp-json\/wp\/v2\/media?parent=505"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.appblog.cn\/index.php\/wp-json\/wp\/v2\/categories?post=505"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.appblog.cn\/index.php\/wp-json\/wp\/v2\/tags?post=505"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}