ReactNative组件间的通信
父组件向子组件通信
- 父组件向子组件传值
- 通过
props传递 在父组件中name='我是父组件向子组件传递的参数' - 在子组件中通过
this.props.name获取 - 父组件向子组件传递方法
- 与传递参数方法相同，通过
props方法这样传递test={this.onParentClick1} - 在子组件中触发这个方法
this.props.test();
子组件向父组件通信
- 子组件向父组件传值
- 在子组件
state中定义一个参数this.state = {name : '我是子组件向父组件传递的参数' }; - 在父组件中给子组件绑定
ref,如 - 在父组件中获取子组件的
state,如this.refs.childern.state.name - 子组件向父组件传递方法
- 同样通过
ref来获得，前两部与传参方法相同。 - 获取方法的方式也同样
this.refs.childern.onChildenCilck2();
非父子组件之间的传值
- 组件之间无关联的形式与子组件向父组件传值的方式相同
- 通过
ref给组件标记一个名字，同样通过this.refs.***.state/function方法相互调用。
demo示例
父子组件通信demo
点击父组件按钮打印子组件的
state和方法
打印日志1点击子组件按钮打印父组件的传递的参数和方法
打印日志2
/**
* Sample React Native App
* https://github.com/facebook/react-native
* @flow
*/
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View,
TouchableOpacity
} from 'react-native';
export default class JSXDemo extends Component {
render() {
return (
<View style={styles.bg}>
<Parents />
View>
);
}
}
class Parents extends Component{
render(){
return(
<View style={styles.parents}>
<Childern ref='childern' name='我是父组件向子组件传递的参数' test={this.onParentClick1} />
<Text >
我是父组件
Text>
<TouchableOpacity onPress={this.onParentClick2}>
<Text style={styles.btn}>
我是父组件按钮
Text>
TouchableOpacity>
View>
)
}
onParentClick1 = ()=>{
console.log('我是从父组件传递到子组件的方法');
}
onParentClick2 = ()=>{
console.log(this.refs.childern.state.name);
this.refs.childern.onChildenCilck2();
}
}
class Childern extends Component {
constructor(props) {
super(props);
this.state = {
name : '我是子组件向父组件传递的参数'
};
}
onChildenCilck1 = () =>{
console.log(this.props.name);
this.props.test();
}
onChildenCilck2 = () =>{
console.log('我是子组件向父组件传递的方法');
}
render(){
return(
<View style={styles.childern}>
<Text> 我是子组件 Text>
<TouchableOpacity onPress={this.onChildenCilck1}>
<Text style={styles.btn}>
我是子组件按钮
Text>
TouchableOpacity>
View>
)
}
}
const styles = StyleSheet.create({
bg:{
flex:1,
justifyContent:'center',
alignItems:'center'
},
parents: {
width:300,
height:300,
backgroundColor:'red',
justifyContent:'center',
alignItems:'center'
},
childern: {
width:100,
height:100,
marginTop:10,
backgroundColor:'green',
justifyContent:'center',
alignItems:'center'
},
btn:{
backgroundColor:'yellow',
}
});
AppRegistry.registerComponent('JSXDemo', () => JSXDemo);
Navigator传值
push传值- 首先在路由上配置
{...route.params}
render() {
let rootViewName = 'FirstView';
let rootComponent = FirstView;
return (
{
return Navigator.SceneConfigs.HorizontalSwipeJump ;
}}
renderScene = {(route, navigator) => {
let Component = route.component;
return - 然后在
push的时候传params属性，下面的id: Id,就是我们要传递下去的参数
push = (Id) =>{
var _this = this;
const navigator = this.props.navigator;
if (navigator) {
navigator.push({
name: 'SecondView',
component: SecondView,
params: {
id: Id,
getUser: function(user) {
_this.setState({
user: user
})
}
}
});
}
}
- 最后在二级界面通过
props属性来接收,this.props.id就是上个界面传递过来的参数
componentDidMount() {
this.setState({
Id : this.props.id
});
}
pop回调- 首先在一级界面将一个方法通过
params向二级界面传递。下面的getUser: function(user)方法就是我们传递下去的方法
push = (Id) =>{
var _this = this;
const navigator = this.props.navigator;
if (navigator) {
navigator.push({
name: 'SecondView',
component: SecondView,
params: {
id: Id,
getUser: function(user) {
_this.setState({
user: user
})
}
}
});
}
}
- 在二级界面
pop回调的时候，通过props触发这个方法。这样就实现了回调
pop = () =>{
if (this.props.navigator) {
this.props.navigator.pop();
let user = USER_MODELS[this.state.Id];
this.props.getUser(user);
}
}
上面的
user就是回传的参数，在回调方法getUser中进行处理代码展示
index.ios.js路由配置
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View,
Navigator
} from 'react-native';
import FirstView from './FirstView'
export default class ZZHNavigator extends Component {
render() {
let rootViewName = 'FirstView';
let rootComponent = FirstView;
return (
{
return Navigator.SceneConfigs.HorizontalSwipeJump ;
}}
renderScene = {(route, navigator) => {
let Component = route.component;
return FirstView一级界面
import React, { Component } from 'react';
import {
StyleSheet,
Text,
View
} from 'react-native';
import SecondView from './SecondView';
class FirstView extends Component {
constructor(props) {
super(props);
this.state = {
user : null
};
}
push = (Id) =>{
var _this = this;
const navigator = this.props.navigator;
if (navigator) {
navigator.push({
name: 'SecondView',
component: SecondView,
params: {
id: Id,
getUser: function(user) {
_this.setState({
user: user
})
}
}
});
}
}
render() {
return (
<View style={styles.flex}>
<Text style = {styles.btn} onPress = {() => this.push(0)}>
查询ID为0的学生信息
Text>
<Text style = {styles.btn} onPress = {() => this.push(1)}>
查询ID为1的学生信息
Text>
<Text style = {styles.btn} >
{
this.state.user? JSON.stringify(this.state.user) : ''
}
Text>
View>
);
}
}
const styles = StyleSheet.create({
flex:{
flex:1,
justifyContent:'center',
alignItems:'center',
},
btn:{
marginTop:10,
padding:5,
backgroundColor:'red',
color:'white',
}
});
export default FirstView;
SecondView二级界面
import React, { Component } from 'react';
import {
StyleSheet,
Text,
View
} from 'react-native';
const USER_MODELS = {
0: { 姓名: '小明', 性别: '男' },
1: { 姓名: '韩梅梅', 性别: '女' }
};
class SecondView extends Component {
constructor(props) {
super(props);
this.state = {
Id : null
};
}
componentDidMount() {
this.setState({
Id : this.props.id
});
}
pop = () =>{
if (this.props.navigator) {
this.props.navigator.pop();
let user = USER_MODELS[this.state.Id];
this.props.getUser(user);
}
}
render() {
return (
<View style={styles.flex}>
<Text style = {styles.btn}>
我是学生{this.state.Id}信息
Text>
<Text style = {styles.btn}>
{
JSON.stringify(USER_MODELS[this.state.Id])
}
Text>
<Text style = {styles.btn} onPress = {() => this.pop()}>
点我返回上一页
Text>
View>
);
}
}
const styles = StyleSheet.create({
flex:{
flex:1,
justifyContent:'center',
alignItems:'center',
},
btn:{
marginTop:10,
padding:5,
backgroundColor:'red',
color:'white',
}
});
export default SecondView;
- Demo展示
- 一级界面有两个学生按钮，点击跳向二级界面，分别传递不同的
id
FirstView.jpeg - 二级界面通过传过来学生
id，在字典中得到相应的学生数据。
SecondView.jpeg - 点击按钮返回一级界面，讲二级界面得到的学生对象
user回传给一级界面，并且通过回调方法，将数据渲染在界面上。
