React Native入门基础——Props

JSX和JS
一.Props(属性)
大多数组件在创建的时候就可以用各种参数来进行定制。用于定制的这些参数就称为props（属性）

二.Props例子
1.Image组件

 render(){    let pic = {     uri:'https://upload.wikimedia.org/wikipedia/commons/d/de/Bananavarieties.jpg'    };    return (<Image source = {pic} style={{width: 193,height: 110}}/>);  }
1
2
3
4
5
6

分析：
{}：把任意合法的JavaScript表达式通过括号嵌入到JSX语句中 ，括号内部为一个js变量或表达式
例如：{pic}：用括号把pic变量嵌入到JSX语句中

2.自定义组件
自定义组件也可以使用props，在render函数中引用this.props

class Class1 extends Component{  render(){    return(<Text>Hello {this.props.name}</Text>);  }}class AwesomeProject extends Component {  render (){    return(        <View style={{alignment:'center'}}>          <Class1 name='a'/>          <Class1 name='b'/>          <Class1 name='c'/>        </View>    );  }}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

分析：
咋Class1中将name作为一个属性，将Class1组件写在JSX语句中，用法和内置组件一样。