父組件向子組件通信
- 父組件向子組件傳值
- 通過
props傳遞 在父組件中name='我是父組件向子組件傳遞的參數(shù)' - 在子組件中通過
this.props.name獲取 - 父組件向子組件傳遞方法
- 與傳遞參數(shù)方法相同，通過
props方法這樣傳遞test={this.onParentClick1} - 在子組件中觸發(fā)這個(gè)方法
this.props.test();
子組件向父組件通信
- 子組件向父組件傳值
- 在子組件
state中定義一個(gè)參數(shù)this.state = {name : '我是子組件向父組件傳遞的參數(shù)' }; - 在父組件中給子組件綁定
ref,如<Childern ref='childern' /> - 在父組件中獲取子組件的
state,如this.refs.childern.state.name - 子組件向父組件傳遞方法
- 同樣通過
ref來獲得，前兩部與傳參方法相同。 - 獲取方法的方式也同樣
this.refs.childern.onChildenCilck2();
非父子組件之間的傳值
- 組件之間無關(guān)聯(lián)的形式與子組件向父組件傳值的方式相同
- 通過
ref給組件標(biāo)記一個(gè)名字嗤练，同樣通過this.refs.***.state/function方法相互調(diào)用锣吼。
demo示例
父子組件通信demo
-
點(diǎn)擊父組件按鈕打印子組件的
state和方法
打印日志1 -
點(diǎn)擊子組件按鈕打印父組件的傳遞的參數(shù)和方法
打印日志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='我是父組件向子組件傳遞的參數(shù)' 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 : '我是子組件向父組件傳遞的參數(shù)'
};
}
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 (
<Navigator
initialRoute = {{ name: rootViewName, component: rootComponent }}
configureScene = {(route) => {
return Navigator.SceneConfigs.HorizontalSwipeJump ;
}}
renderScene = {(route, navigator) => {
let Component = route.component;
return <Component {...route.params} navigator = {navigator} />
}} />
);
}
- 然后在
push的時(shí)候傳params屬性绩衷，下面的id: Id,就是我們要傳遞下去的參數(shù)
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
})
}
}
});
}
}
- 最后在二級(jí)界面通過
props屬性來接收,this.props.id就是上個(gè)界面?zhèn)鬟f過來的參數(shù)
componentDidMount() {
this.setState({
Id : this.props.id
});
}
-
pop回調(diào) - 首先在一級(jí)界面將一個(gè)方法通過
params向二級(jí)界面?zhèn)鬟f谐檀。下面的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
})
}
}
});
}
}
- 在二級(jí)界面
pop回調(diào)的時(shí)候，通過props觸發(fā)這個(gè)方法纯趋。這樣就實(shí)現(xiàn)了回調(diào)
pop = () =>{
if (this.props.navigator) {
this.props.navigator.pop();
let user = USER_MODELS[this.state.Id];
this.props.getUser(user);
}
}
上面的
user就是回傳的參數(shù)，在回調(diào)方法getUser中進(jìn)行處理代碼展示
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 (
<Navigator
initialRoute = {{ name: rootViewName, component: rootComponent }}
configureScene = {(route) => {
return Navigator.SceneConfigs.HorizontalSwipeJump ;
}}
renderScene = {(route, navigator) => {
let Component = route.component;
return <Component {...route.params} navigator = {navigator} />
}} />
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
welcome: {
fontSize: 20,
textAlign: 'center',
margin: 10,
},
instructions: {
textAlign: 'center',
color: '#333333',
marginBottom: 5,
},
});
AppRegistry.registerComponent('ZZHNavigator', () => ZZHNavigator);
-
FirstView一級(jí)界面
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的學(xué)生信息
</Text>
<Text style = {styles.btn} onPress = {() => this.push(1)}>
查詢ID為1的學(xué)生信息
</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二級(jí)界面
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}>
我是學(xué)生{this.state.Id}信息
</Text>
<Text style = {styles.btn}>
{
JSON.stringify(USER_MODELS[this.state.Id])
}
</Text>
<Text style = {styles.btn} onPress = {() => this.pop()}>
點(diǎn)我返回上一頁
</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展示
- 一級(jí)界面有兩個(gè)學(xué)生按鈕，點(diǎn)擊跳向二級(jí)界面吵冒，分別傳遞不同的
id
FirstView.jpeg - 二級(jí)界面通過傳過來學(xué)生
id纯命，在字典中得到相應(yīng)的學(xué)生數(shù)據(jù)。
SecondView.jpeg - 點(diǎn)擊按鈕返回一級(jí)界面桦锄，講二級(jí)界面得到的學(xué)生對(duì)象
user回傳給一級(jí)界面扎附，并且通過回調(diào)方法，將數(shù)據(jù)渲染在界面上结耀。
回調(diào).jpeg
