前言
眼看很多公司都开始尝试使用ReactNative,达到跨平台开发，最近也写了很多文章，希望让更多想了解的同学快速上手ReactNative.
如果喜欢我的文章，可以关注我微博:袁峥Seemygo
ReactNative之父子组件传值
顺传（父传子）
- 1.通过props传值
- 案例：父控件给子控件传递名称，子控件根据父控件提供的名称显示谁的儿子
// 子组件
class SonCompoent extends Component{
render() {
return (
<View style={styles.sonViewStyle}>
<Text style={{fontSize:20}}>{this.props.name}的baby</Text>
</View>
);
};
}
// 父组件
class FatherComponet extends Component {
render() {
return (
<View style={{flex:1,alignItems:'center'}}>
<SonCompoent name={this.props.name}/>
</View>
);
}
}
// 主组件
export default class ReactDemo extends Component {
render() {
return (
<FatherComponet name="xmg" />
);
}
}
const styles = StyleSheet.create({
sonViewStyle:{
flex:1,
justifyContent:'center',
alignItems:'center',
}
});
- 2.有时候需要拿到组件传值，通过ref拿到控件给控件传值。
- 案例：爸爸每个月，给儿子生活费.
- 使用箭头函数解决绑定this问题
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View
} from 'react-native';
class SonCompoent extends Component{
constructor(props){
super(props);
this.state = {
money:0
}
}
receiveMoney(money){
this.setState({
money:money
});
}
render() {
return (
<View style={styles.sonViewStyle}>
<Text style={{fontSize:20}}>{this.props.name}的baby</Text>
<Text>总共收到{this.state.money}生活费</Text>
</View>
);
};
}
class FatherComponet extends Component {
render() {
return (
<View style={{flex:1,alignItems:'center'}}>
<Text style={{marginTop:100}} onPress={()=>{
this.refs.son.receiveMoney(1000);
}}>发生活费</Text>
<SonCompoent ref="son" name={this.props.name} />
</View>
);
}
}
export default class ReactDemo extends Component {
render() {
return (
<FatherComponet name="xmg" />
);
}
}
const styles = StyleSheet.create({
sonViewStyle:{
flex:1,
justifyContent:'center',
alignItems:'center',
}
});
AppRegistry.registerComponent('React', () => ReactDemo);
逆传（子传父）
- 使用方法回调
- 1.在父组件中定义一个处理接收到值的方法
- 2.把这个方法传递给子组件，并且绑定this,子组件就能通过this.props拿到这个方法调用
- 案例：儿子赚钱了，把赚的钱传递给父亲
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View
} from 'react-native';
class SonCompoent extends Component{
makeMoney (money) {
// 传递给父控件
console.log('赚了'+ money);
console.log(this)
this.props.receiveMoney(money);
}
render() {
return (
<View style={styles.sonViewStyle}>
<Text style={{fontSize:20}}>{this.props.name}的baby</Text>
<Text onPress={this.makeMoney.bind(this,100)}>赚100块钱</Text>
</View>
);
};
}
class FatherComponet extends Component {
constructor(props){
super(props);
console.log(this);
this.state = {
money:0
};
}
receiveMoney(money) {
console.log('爸爸收到'+ money);
console.log(this);
var m = this.state.money;
m += money;
this.setState({
money:m
});
}
render() {
return (
<View style={{flex:1,alignItems:'center'}}>
<SonCompoent name={this.props.name+'A'} receiveMoney={this.receiveMoney.bind(this)}/>
<SonCompoent name={this.props.name+'B'} receiveMoney={this.receiveMoney.bind(this)}/>
<Text style={{marginBottom:50}}>爸爸收到{this.state.money}</Text>
</View>
);
}
}
export default class ReactDemo extends Component {
render() {
return (
<FatherComponet name="xmg" />
);
}
}
const styles = StyleSheet.create({
sonViewStyle:{
flex:1,
justifyContent:'center',
alignItems:'center',
}
});
AppRegistry.registerComponent('React', () => ReactDemo);
无关联组件传值(通知)
- 当两个组件，互相之间拿不到谁的时候，可以用通知传值.
- 哥哥赚钱了，给弟弟花
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View,
DeviceEventEmitter
} from 'react-native';
class DiDiCompoent extends Component{
constructor(props){
super(props);
this.state = {
money:0
}
}
componentDidMount() {
this.age = 10;
this.age = 20;
console.log(this.age);
// 定义属性,但是对这个属性的修改不会触发render
this.lister = DeviceEventEmitter.addListener('makeMoney',(money)=>{
this.setState({
money:money
});
})
}
componentWillUnmount() {
this.lister.remove();
}
render() {
return (
<View style={styles.didiStyle}>
<Text> 弟弟</Text>
<Text>收到{this.state.money}零花钱</Text>
</View>
);
};
}
class GeGeComponet extends Component {
render() {
return (
<View style={{flex:1,justifyContent:'center',alignItems:'center'}}>
<Text>哥哥</Text>
<Text onPress={()=>{
DeviceEventEmitter.emit('makeMoney',100);
}}>发生活费</Text>
</View>
);
}
}
export default class ReactDemo extends Component {
render() {
return (
<View style={{flex:1}}>
<GeGeComponet />
<DiDiCompoent />
</View>
);
}
}
const styles = StyleSheet.create({
didiStyle:{
flex:1,
justifyContent:'center',
alignItems:'center'
}
});
AppRegistry.registerComponent('React', () => ReactDemo);
