参考文档:http://reactnative.cn/docs/next/props.html#content
根据我蹩脚的英文水平来看,Props来源于英文单词Property有属性的意思(Props作为一个完整单词来看译为支柱,不合语境)。
官方库提供的props
下面以Image为例,这里的source和style就是props.<Image source={pic} style={{width: 193,height: 110}}
中pic外面的{}表示其内部是一个变量或者表达式,任意合法的javascript表达式都可以通过{}嵌入到JSX语句中。
import React,{ Component } from 'react';
import { AppRegistry,Image } from 'react-native';
class Bananas extends Component {
render() {
let pic = {
uri: 'https://upload.wikimedia.org/wikipedia/commons/d/de/Bananavarieties.jpg'
};
return (
<Image source={pic} style={{width: 193,height: 110}} />
);
}
}
AppRegistry.registerComponent('Bananas',() => Bananas);
自定义的props
import React,Text,View } from 'react-native';
class Greeting extends Component {
render() {
return (
<Text>Hello {this.props.name}!</Text>
);
}
}
class LotsOfGreetings extends Component {
render() {
return (
<View style={{alignItems: 'center'}}>
<Greeting name='Rexxar' />
<Greeting name='Jaina' />
<Greeting name='Valeera' />
</View>
);
}
}
AppRegistry.registerComponent('LotsOfGreetings',() => LotsOfGreetings);
上述代码中即定制了名为name的props
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。