React-Native|React-Native 学习第二天（Props（属性）） React-Native学习第二天：Props（属

大多数组件在创建时就可以使用各种参数来进行定制。用于定制的这些参数就称为props（属性）。
1、展示一张图片

export default class TestRN extends Component { //render() 这是一个必须的方法，返回一些用户渲染结构的JSX语句 render() { //定义一个pic常量，赋值为一个图片的地址 let pic = { uri:'https://upload.wikimedia.org/wikipedia/commons/d/de/Bananavarieties.jpg' }; return ( RN学习第二天 ); } }

这句话中，source和style就是属性。source控制图片的来源，也就是地址。注意这里的pic常量赋值方式，外面要加大括号。style控制图片显示的大小。

注意：在iOS上使用http链接的图片地址可能不会显示，因为ios9上增加了ATS，相信绝大部分的ios开发者都是知晓的。解决办法就是用xcode打开项目，修改plist文件属性，这里不再赘述。
运行效果如下：

React-Native|React-Native 学习第二天（Props（属性））

文章图片
image.png 2、自定义组件属性
就像是函数传参数一样，一个函数就类似于一个组件，属性相当于参数。上代码：

//自定义一个Greeting组件 class Greeting extends Component { render() { return ( Hello {this.props.name}! ); } }

【React-Native|React-Native 学习第二天（Props（属性））】关键点就是 {this.props.name}! 这一句代码。这里的name就相当于是函数的参数，调用的方式如下：

//定义了一个名为TestRN的新的组件 export default class TestRN extends Component { //render() 这是一个必须的方法，返回一些用户渲染结构的JSX语句 render() { //定义一个pic常量，赋值为一个图片的地址 let pic = { uri:'https://upload.wikimedia.org/wikipedia/commons/d/de/Bananavarieties.jpg' }; return ( RN学习第二天 ); } }

主要代码如下：

运行效果如下：