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}}/>);
}
分析:
{}:把任意合法的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>
);
}
}
分析:
咋Class1中将name作为一个属性,将Class1组件写在JSX语句中,用法和内置组件一样。