reactNative学习笔记之Props属性

在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>);}}

当你指定了某个属性是必须传递的时候，如果你还指定了默认值，那么也不会有警告的。
下边连接是视频教程

点击打开链接