\u5b9e\u73b0\u5f02\u6b65\u83b7\u53d6\u7f51\u7edc\u6570\u636e<\/p>\n
Android\u539f\u751f\u5f00\u53d1\uff1a\u5b50\u7ebf\u7a0b+handler\u673a\u5236\uff0c\u5f02\u6b65\u4efb\u52a1AsyncTask<\/p>\n
React Native\u64c5\u957fUI\u754c\u9762\u5904\u7406\uff0c\u901a\u8fc7 <\/p>\n RN\u4e2d\u7684\u7f51\u7edc\u8bf7\u6c42\uff1aXMLHttpRequest Fetch<\/p>\n \u5b9e\u73b0\u5f02\u6b65\u83b7\u53d6\u7f51\u7edc\u6570\u636e Android\u539f\u751f\u5f00\u53d1\uff1a\u5b50\u7ebf\u7a0b+handler\u673a\u5236\uff0c\u5f02\u6b65\u4efb\u52a1AsyncTask Reac […]<\/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-495","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\/495","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=495"}],"version-history":[{"count":0,"href":"https:\/\/www.appblog.cn\/index.php\/wp-json\/wp\/v2\/posts\/495\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.appblog.cn\/index.php\/wp-json\/wp\/v2\/media?parent=495"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.appblog.cn\/index.php\/wp-json\/wp\/v2\/categories?post=495"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.appblog.cn\/index.php\/wp-json\/wp\/v2\/tags?post=495"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}this.state<\/code>\u89e6\u53d1\u5237\u65b0<\/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 Image,\n ListView,\n TouchableHighlight,\n View,\n} from 'react-native';\n\n\/**\n * \u4e3a\u4e86\u907f\u514d\u9a9a\u6270\uff0c\u6211\u4eec\u4f7f\u7528\u4e00\u4e2a\u6837\u4f8b\u6570\u636e\u6765\u66ff\u4ee3Rotten Tomatoes\u7684API\n * \u8bf7\u6c42\uff0c\u8fd9\u4e2a\u6837\u4f8b\u6570\u636e\u653e\u5728React Native\u7684Github\u5e93\u4e2d\u3002\n *\/\nvar REQUEST_URL = 'https:\/\/raw.githubusercontent.com\/facebook\/react-native\/master\/docs\/MoviesExample.json';\n\nexport default class RNAPP extends Component{\n\n constructor(props) {\n super(props); \/\/\u8fd9\u4e00\u53e5\u4e0d\u80fd\u7701\u7565\uff0c\u7167\u6284\u5373\u53ef\n this.state = {\n movies: null, \/\/\u8fd9\u91cc\u653e\u4f60\u81ea\u5df1\u5b9a\u4e49\u7684state\u53d8\u91cf\u53ca\u521d\u59cb\u503c\n };\n }\n\n render() {\n if (!this.state.movies) {\n \/\/\u5982\u679cmovies==null\uff0c\u5373\u521d\u59cb\u60c5\u51b5\uff0c\u5219\u6e32\u67d3\u52a0\u8f7d\u89c6\u56fe\n return this.renderLoadingView();\n }\n\n \/\/\u4ece\u7f51\u7edc\u4e0a\u83b7\u53d6\u4e86\u6570\u636e\u7684\u60c5\u51b5\n var movie = this.state.movies[0];\n return this.renderMovie(movie);\n }\n\n renderLoadingView() {\n return (\n <View style={styles.container}>\n <Text>\n \u6b63\u5728\u7f51\u7edc\u4e0a\u83b7\u53d6\u7535\u5f71\u6570\u636e\u2026\u2026\n <\/Text>\n <\/View>\n );\n }\n\n \/\/\u6e32\u67d3\u4e00\u4e2a\u7535\u5f71\u4fe1\u606f\n renderMovie(movie) {\n return (\n <View style={styles.container}>\n <Image\n source={{uri: movie.posters.thumbnail}}\n style={styles.thumbnail}\n \/>\n <View style={styles.rightContainer}>\n <Text style={styles.title}>\u6807\u9898\uff1a{movie.title}<\/Text>\n <Text style={styles.year}>{movie.year}\u5e74<\/Text>\n <\/View>\n <\/View>\n );\n }\n\n componentDidMount() {\n this.fetchData();\n }\n\n \/\/\u5728React\u7684\u5de5\u4f5c\u673a\u5236\u4e0b\uff0csetState\u5b9e\u9645\u4e0a\u4f1a\u89e6\u53d1\u4e00\u6b21\u91cd\u65b0\u6e32\u67d3\u7684\u6d41\u7a0b\uff0c\u6b64\u65f6render\u51fd\u6570\u88ab\u89e6\u53d1\uff0c\u53d1\u73b0this.state.movies\u4e0d\u518d\u662fnull\n fetchData() {\n fetch(REQUEST_URL)\n .then((response) => response.json())\n .then((responseData) => {\n this.setState({\n movies: responseData.movies,\n });\n })\n .done();\n \/\/\u8c03\u7528done()\uff0c\u53ef\u4ee5\u629b\u51fa\u5f02\u5e38\u800c\u4e0d\u662f\u7b80\u5355\u5ffd\u7565\n }\n}\n\nconst styles = StyleSheet.create({\n container: {\n flex: 1,\n flexDirection: 'row',\n justifyContent: 'center',\n alignItems: 'center',\n backgroundColor: '#F5FCFF',\n },\n thumbnail: {\n width: 53,\n height: 81,\n\n },\n \/\/\u8ba9rightContainer\u5728\u7236\u5bb9\u5668\u4e2d\u5360\u636eImage\u4e4b\u5916\u5269\u4e0b\u7684\u5168\u90e8\u7a7a\u95f4\u3002\n rightContainer: {\n flex: 1,\n },\n title: {\n fontSize: 20,\n marginBottom: 8,\n textAlign: 'center',\n },\n year: {\n textAlign: 'center',\n },\n});\n\nAppRegistry.registerComponent('RNAPP', () => RNAPP);<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"