{"id":367,"date":"2015-12-20T22:58:08","date_gmt":"2015-12-20T14:58:08","guid":{"rendered":"http:\/\/weitaoc.com\/?p=367"},"modified":"2019-09-27T14:19:06","modified_gmt":"2019-09-27T06:19:06","slug":"react-native%e6%a8%a1%e5%9d%97%e7%9b%b4%e6%8e%a5%e7%9a%84%e7%9b%91%e5%90%ac%ef%bc%88%e9%9d%9e%e4%b8%8e%e5%8e%9f%e7%94%9f%ef%bc%89","status":"publish","type":"post","link":"http:\/\/weitaoc.com\/?p=367","title":{"rendered":"react-native\u6a21\u5757\u76f4\u63a5\u7684\u76d1\u542c\uff08\u975e\u4e0e\u539f\u751f\uff09"},"content":{"rendered":"

\u548c\u539f\u751f\u4e4b\u95f4\u7684\u901a\u4fe1\u524d\u9762\u8bf4\u4e86\uff0c\u8fd9\u91cc\u53ea\u8bf4react-native\u6a21\u5757\u95f4\u7684\u901a\u4fe1\uff0c\u9002\u7528\u60c5\u51b5\u4e0e\u53c2\u6570\u4f20\u9012\u4e0d\u4e00\u6837\uff0c\u8fd9\u4e2a\u6a21\u5757\u95f4\u53ef\u80fd\u5e76\u6ca1\u6709\u76f4\u63a5\u5173\u8054\uff0c\u6bd4\u5982\u540e\u53f0\u76d1\u542c\u8fdb\u7a0b\u76d1\u542c\u5230\u66f4\u65b0\u7b49\u3002
\nreact-native\u5b9e\u4f8b\u5316\u4e86\u4e00\u4e2aEventEmitter\uff0c\u5c01\u88c5\u6210RCTDeviceEventEmitter\uff0c\u901a\u8fc7RCTDeviceEventEmitter\u5efa\u7acb\u76d1\u542c\u5e76\u56de\u8c03\u5904\u7406\u65b9\u6cd5\u3002
\n\u6838\u5fc3\u7684\u4e1c\u897f\u7275\u626f\u592a\u591a\uff0c\u8fd9\u91cc\u76f4\u63a5\u4e0ademo\u3002<\/p>\n

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
<\/div><\/td>
\/**
\n * Sample React Native App
\n * https:\/\/github.com\/facebook\/react-native
\n *\/
\n'use strict';
\n
\nvar React = require('react-native');
\n
\nvar RCTDeviceEventEmitter = require('RCTDeviceEventEmitter');
\n
\nvar {
\n  StyleSheet,
\n  Text,
\n  View,
\n  TextInput
\n} = React;
\n
\n
\nvar styles = StyleSheet.create({
\n  container: {
\n    flex: 1,
\n    justifyContent: 'center',
\n    alignItems: 'center',
\n    backgroundColor: '#F5FCFF',
\n  },
\n  welcome: {
\n    fontSize: 20,
\n    textAlign: 'center',
\n    margin: 10,
\n  },
\n  instructions: {
\n    textAlign: 'center',
\n    color: '#333333',
\n    marginBottom: 5,
\n  },
\n});
\n
\n
\nvar Input = React.createClass({
\n
\n    handleUpdateChange(text) {
\n        RCTDeviceEventEmitter.emit('change',text);
\n    },
\n
\n
\n  render() {
\n
\n    return (
\n      <View style={{justifyContent: 'center',alignItems: 'center',backgroundColor: '#F5FCFF'}}>
\n        <TextInput onChangeText={(text) => this.handleUpdateChange(text)} style={{ width : 200, height: 40, borderColor: 'gray', borderWidth: 1}} \/>
\n      <\/View>
\n    );
\n  }
\n});
\n
\n
\n
\n
\nvar ShowText = React.createClass({
\n
\n    getInitialState(){
\n      return {
\n        text : ''
\n      }
\n    },
\n
\n    componentDidMount(){
\n      var me = this;
\n      RCTDeviceEventEmitter.addListener('change',function(text){
\n         me.setState({
\n          text : text
\n         })
\n      })
\n    },
\n
\n
\n    render() {
\n        return (
\n          <View style={{justifyContent: 'center',alignItems: 'center',backgroundColor: '#F5FCFF'}}>
\n            <Text>{this.state.text}<\/Text>
\n          <\/View>
\n        );
\n    }
\n});
\n
\nmodule.exports = React.createClass({
\n
\n
\n  render() {
\n    return (
\n      <View style={styles.container}>
\n        <Input \/>
\n        <ShowText \/>
\n      <\/View>
\n    );
\n  }
\n});<\/pre><\/div><\/td><\/tr><\/tbody><\/table><\/div>\n

\"fb273ef29cf057a236290c437f325ef1\"<\/a><\/p>\n

\u8f6c\u8f7d\u8bf7\u6ce8\u660e\uff1a\u8ff7\u8def\u7684\u8001\u9f20<\/a> » react-native\u6a21\u5757\u76f4\u63a5\u7684\u76d1\u542c\uff08\u975e\u4e0e\u539f\u751f\uff09<\/a><\/p>","protected":false},"excerpt":{"rendered":"

\u548c\u539f\u751f\u4e4b\u95f4\u7684\u901a\u4fe1\u524d\u9762\u8bf4\u4e86\uff0c\u8fd9\u91cc\u53ea\u8bf4react-native\u6a21\u5757\u95f4\u7684\u901a\u4fe1\uff0c\u9002\u7528\u60c5\u51b5\u4e0e\u53c2\u6570\u4f20\u9012\u4e0d\u4e00\u6837\uff0c\u8fd9\u4e2a\u6a21\u5757\u95f4\u53ef\u80fd\u5e76\u6ca1\u6709\u76f4\u63a5\u5173\u8054\uff0c\u6bd4\u5982\u540e\u53f0\u76d1\u542c\u8fdb\u7a0b\u76d1\u542c\u5230\u66f4\u65b0\u7b49\u3002 react-native\u5b9e\u4f8b\u5316\u4e86\u4e00\u4e2aEventEmitter\uff0c\u5c01\u88c5\u6210RCTDeviceEv […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[58],"tags":[49],"class_list":["post-367","post","type-post","status-publish","format-standard","hentry","category-other","tag-react"],"views":9827,"_links":{"self":[{"href":"http:\/\/weitaoc.com\/index.php?rest_route=\/wp\/v2\/posts\/367","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/weitaoc.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/weitaoc.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/weitaoc.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/weitaoc.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=367"}],"version-history":[{"count":2,"href":"http:\/\/weitaoc.com\/index.php?rest_route=\/wp\/v2\/posts\/367\/revisions"}],"predecessor-version":[{"id":369,"href":"http:\/\/weitaoc.com\/index.php?rest_route=\/wp\/v2\/posts\/367\/revisions\/369"}],"wp:attachment":[{"href":"http:\/\/weitaoc.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=367"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/weitaoc.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=367"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/weitaoc.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=367"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}