在android当中两个页面之间传递值,可以通过bundle,那么在reactNative中,是怎么传递的呢?
没错,就是通过Props,使用方法如下
首先在我们自己的页面通过{this.props.propsName}这种方式拿到上一个页面传递过来的值,propsName表示传递的属性值名称
import React,{Component} from 'react';
import {Text,View} from 'react-native';
export default class PropsTest2 extends Component{
render(){
return (
<Text style={{backgroundColor:'red',fontSize:20}}>{this.props.name}</Text>
);
}
}
然后在上一个页面怎么传值过来呢?是通过在<PropsTest2_1 name='小明'/>这种方法
import React, {
Component
} from 'react';
import {
Platform,
StyleSheet,
Text,
View
} from 'react-native';
import PropsTest2_1 from './testJs/PropsTest2_1.js'
export default class App extends Component{
render(){
return(
<View>
<PropsTest2_1 name='小明'/>
</View>
);
}
}
如果万一我们要是没传递过来,忘了传递了,我们总得有个默认值吧!如何写呢?
import React,{Component} from 'react';
import {Text,View} from 'react-native';
export default class PropsTest2 extends Component{
static defaultProps={
name:'小红-默认值'
}
render(){
return (
<Text style={{backgroundColor:'red',fontSize:20}}>{this.props.name}</Text>
);
}
}
这样就Ok了,如果说我要传递的属性比较多,怎么办?就需要用到延展操作符了
export default class App extends Component{
render(){
var params = {name:'小明',age:19,sex:'man'}
return(
<View>
<PropsTest2_1 {...params}/>
</View>
);
}
}
这样就搞定了,还有需求的情况是,传递的参数很多,但是我只想传递一部分,只想传递几个属性,咋整?就需要用到解构赋值
export default class App extends Component{
render(){
var params = {name:'小明',age:19,sex:'man'};
var {name,age}=params;
return(
<View>
<PropsTest2_1 {...params}/>
<PropsTest2_1 name={name} age={age}/>
</View>
);
}
}
这样就搞定了,其实我们自定义组件的时候,可能会强制传递属性的时候,必须是字符串或者number类型,那么如何告诉使用我们组件的开发者呢?
import React,{Component} from 'react';
import {Text,View} from 'react-native';
import PropTypes from 'prop-types';
export default class PropsTest2 extends Component{
static defaultProps={
name:'小红-默认值',
age:18,
// sex:'man'
}
static propTypes={
name:PropTypes.string,
sex:PropTypes.string.isRequired,
}
render(){
return (
<Text style={{backgroundColor:'red',fontSize:20}}>姓名:{this.props.name},年龄:{this.props.age},性别:{this.props.sex}</Text>
);
}
}
当你指定了某个属性是必须传递的时候,如果你还指定了默认值,那么也不会有警告的。
下边连接是视频教程