子组件修改父组件的状态,在开发中非常常见,下面列举了几种方式。
DeviceEventEmitter可以跨组件,跨页面进行数据传递,还有一些状态的修改。http://www.jianshu.com/p/c6991a241b4f

兄弟组件可以进行修改,所谓兄弟组件,就是说同一个页面,有两个组件,组件A,组件B,组件A的状态的变化,可以导致组件B的状态变化,有两种方式。第一种,使用DeviceEventEmitter跨组件通信。第二种,在页面内定义一个State,组件A,使用props属性引入,操作组件A,修改页面内的State,然后,组件B,也是引入页面内的State,所有,当组件A状态变化时,修改页面的State,重新Render,然后,更新组件B,组件B进行Render。

二: Coding
新建三个组件:分别为PostCallMsgAndMsg,PostCallMsg,PostMsg;
在Msg进行使用。

import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View,
DeviceEventEmitter
} from 'react-native';
import PostMsg from './PostMsg'
import PostCallMsg from './PostCallMsg'
import PostCallMsgAndMsg from './PostCallMsgAndMsg' export default class Msg extends Component {
constructor(props){
super(props);
this.state={
listenerMsg:'listenerMsg',
callMsg:'callMsg',
callMsgAndMsg:'callMsgAndMsg' }
} componentDidMount() {
//注意addListener的key和emit的key保持一致
this.msgListener = DeviceEventEmitter.addListener('Msg',(listenerMsg) => {
this.setState({
listenerMsg:listenerMsg,
})
}); } componentWillUnmount() {
//此生命周期内,去掉监听
this.msgListener&&this.msgListener.remove();
} render() {
return (
<View style={styles.container}>
<Text>第一种方式 DeviceEventEmitter:</Text>
<Text>{this.state.listenerMsg}</Text>
<PostMsg /> <Text>第二种方式 CallBack:</Text>
<Text>{this.state.callMsg}</Text>
<PostCallMsg onChangeMsg={
this.onMsgByCall
}/> <Text>第三种方式 CallBack有参数:</Text>
<Text>{this.state.callMsgAndMsg}</Text>
<PostCallMsgAndMsg onChangeMsg={(msg)=>{
this.onMsgByCallAndMsg(msg)
} }/> </View>
);
} onMsgByCall=()=>{
this.setState({
callMsg:'通过CallBack修改父组件状态值'
})
} onMsgByCallAndMsg=(msg)=>{
this.setState({
callMsgAndMsg:msg
})
}
} const styles = StyleSheet.create({
container: {
flex: ,
justifyContent: 'center',
alignItems:'center',
},
});
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View,
TouchableOpacity,
} from 'react-native'; export default class PostCallMsgAndMsg extends Component {
render() {
return (
<View style={styles.container}>
<View style={styles.viewLine}/>
<TouchableOpacity onPress={this._postMsgByCallBack}>
<Text>PostCallMsgAndMsg</Text>
</TouchableOpacity>
</View>
);
} _postMsgByCallBack=()=>{
if(this.props.onChangeMsg){
this.props.onChangeMsg('通过PostCallMsgAndMsg来传递属性');
}
}
} const styles = StyleSheet.create({
container: {
justifyContent: 'center',
alignItems: 'center',
marginBottom:,
},
});
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View,
TouchableOpacity,
} from 'react-native'; export default class PostCallMsg extends Component {
render() {
return (
<View style={styles.container}>
<View style={styles.viewLine}/>
<TouchableOpacity onPress={this._postMsgByCallBack}>
<Text>Callback</Text>
</TouchableOpacity>
</View>
);
} _postMsgByCallBack=()=>{
if(this.props.onChangeMsg){
this.props.onChangeMsg();
}
}
} const styles = StyleSheet.create({
container: {
justifyContent: 'center',
alignItems: 'center',
marginBottom:,
}, });
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View,
TouchableOpacity,
DeviceEventEmitter,
} from 'react-native'; export default class PostMsg extends Component {
render() {
return (
<View style={styles.container}>
<TouchableOpacity onPress={this._postMsgByListener}>
<Text>DeviceEventEmitter</Text>
</TouchableOpacity>
</View>
);
} _postMsgByListener=()=>{
DeviceEventEmitter.emit('Msg','此消息来自于子组件,DeviceEventEmitter父组件进行修改和状态变化');
} } const styles = StyleSheet.create({
container: {
justifyContent: 'center',
alignItems: 'center',
marginBottom:,
},
});

React-Native子组件修改父组件的几种方式,兄弟组件状态修改(转载)的更多相关文章

  1. Vue父子组件通信(父级向子级传递数据、子级向父级传递数据、Vue父子组件存储到data数据的访问)

    Vue父子组件通信(父级向子级传递数据.子级向父级传递数据.Vue父子组件存储到data数据的访问) 一.父级向子级传递数据[Prop]: ● Prop:子组件在自身标签上,使用自定义的属性来接收外界 ...

  2. 修改element内部样式的两种方式

    第一种: 全局样式修改: 但这种方式有点不好的地方,这样会影响别的组件,比如修改elementUI的树结构的样式,这样改的话会影响到别的树组件: 第二种方式: 在要修改的组件内修改树结构样式 比如改这 ...

  3. Iframe刷新父窗口的几种方式

    /*Iframe刷新父窗口的几种方式在iframe的子页面中,使用onload刷新父页面的时候,遇到了一些问题. 1.目前来说,测试成功,并且兼容IE6/7和FF的刷新方式. */ <scrip ...

  4. Vue中组件间传值常用的几种方式

    版本说明: vue-cli:3.0 一.父子组件间传值 1.props/$emit -父组件==>>子组件: 子组件中通过定义props接收父组件中通过v-bind绑定的数据 父组件代码 ...

  5. Vue学习(二)-Vue中组件间传值常用的几种方式

    版本说明:vue-cli:3.0 主要分为两类: 1.父子组件间的传值 2.非父子组件间的传值 1.父子组件间传值 父组件向子组件传值 第一种方式: props 父组件嵌套的子组件中,使用v-bind ...

  6. Java-Maven项目引入UEditor图片上传组件jar包类库的5种方式

    最近,硬是和百度的UEditor组件杠上了.自己的个人官网项目,很容易就搞定了,公司的项目,尼玛,各种问题.项目多了,环境复杂了,解决问题的方法也得不断调整. 项目用Maven管理jar包,用到了UE ...

  7. React.js入门笔记 创建hello world 的6种方式

    一.ReactJS简介 React 起源于 Facebook 的内部项目,因为该公司对市场上所有 JavaScript MVC 框架,都不满意,就决定自己写一套,用来架设 Instagram 的网站. ...

  8. 修改ElementUI样式的几种方式

    ElementUI是一款非常强大的前端UI组件库,它默认定义了很多美观的样式,但是我们在实际开发过程中不可避免地遇到需要修改ElementUI默认样式.下面总结了几种修改默认样式的方法. 1. 新建全 ...

  9. JS刷新父窗口的几种方式<转>

    常用的有:   window.opener.location.reload();    和  window.location.reload(); 浮层内嵌iframe及frame集合窗口,刷新父页面的 ...

  10. JS刷新父窗口的几种方式

    浮层内嵌iframe及frame集合窗口,刷新父页面的多种方法   <script language=JavaScript>       parent.location.reload(); ...

随机推荐

  1. json2.js 序列化 和反序列化 转

    http://www.cnblogs.com/youring2/archive/2013/03/01/2938850.html json2.js的源码地址: https://github.com/do ...

  2. 转-【exp/imp】将US7ASCII字符集的dmp文件导入到ZHS16GBK字符集的数据库中

    原帖地址:http://blog.csdn.net/lihuarongaini/article/details/71512116 1.2  前言部分 1.2.1  导读和注意事项 各位技术爱好者,看完 ...

  3. Beta阶段——第2篇 Scrum 冲刺博客

    Beta阶段--第2篇 Scrum 冲刺博客 标签:软件工程 一.站立式会议照片 二.每个人的工作 (有work item 的ID) 昨日已完成的工作 人员 工作 林羽晴 完成https安全连接的问题 ...

  4. xpath 获取表单的值

    <input type="hidden" id="hospital_id" value="6666sui"> $selector ...

  5. Qt中漂亮的几款QSS

    /* === Shared === */QStackedWidget, QLabel, QPushButton, QRadioButton, QCheckBox, QGroupBox, QStatus ...

  6. 五笔xu

      1● 横 a s d f g     半包围 上下 左右   2● 竖 h j k l m 左右 上下 半包围     3● 撇 q w e r t     半包围 上下 左右 4● 捺 y u ...

  7. memory prefix inter,intra,intro,iso out 5

    1● inter 在~之间:相互   2● intra 3● iso 等 同   4● intro 向内,在内,内部  

  8. day05_python_1124

    ---恢复内容开始--- 改l1[1:4:2]=[1:32]   对于增加个数 列表按切片取就是列表 ---恢复内容结束--- 01 昨日内容回顾 list: 增: append insert(ind ...

  9. JAVA按数字,字母排序,但不包括大小写和汉字排序

    public class ABC { public static void main(String[] args) { new ABC().sortStringArray(); } public vo ...

  10. python select poll epoll的区别

    select 优点:为最早的异步io处理模块,他可以再linux上和windows上使用,跨平台兼容性好,而poll和epoll都不能在windows系统环境中使用. 缺点:select的机制决定了他 ...