2.2.3.1 Props(属性)

什么是Props属性

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

示例：

以常见的基础组件Image为例，在创建一个图片时，可以传入一个名为source的 prop 来 指定要显示的图片的地址，以及使用名为style的 prop 来控制其尺寸。

import React, { Component } from 'react';
import { Image } from 'react-native';

export  class pageComponent extends Component {
  render() {
    let pic = {
      uri: 'http://img4.imgtn.bdimg.com/it/u=1906469856,4113625838&fm=26&gp=0.jpg'
    };
    return (
      <Image source={pic} style={{width: 193, height: 110}} />
    );
  }
}

从 Android9 开始，也会默认阻止 http 请求，请参考相关配置请注意{pic}外围有一层括号， 需要用括号来把pic这个变量嵌入到 JSX 语句中。括号的意思是括号内部为一个 js 变量或表达式， 需要执行后取值。因此可以把任意合法的 JavaScript 表达式通过括号嵌入到 JSX 语句中。

自定义的组件也可以使用props。通过在不同的场景使用不同的属性定制， 可以尽量提高自定义组件的复用范畴。只需在render函数中引用this.props， 然后按需处理即可。下面是一个例子：

import React, { Component } from 'react';
import { Text, View } from 'react-native';

class Greeting extends Component {
  render() {
    return (
      <View style={{alignItems: 'center', marginTop: 50}}>
        <Text>Hello {this.props.name}!</Text>
      </View>
    );
  }
}
export  class pageComponent extends Component {
  render() {
    return (
      <View style={{alignItems: 'center'}}>
        <Greeting name='Rexxar' />
        <Greeting name='Jaina' />
        <Greeting name='Valeera' />
      </View>
    );
  }
}

在Greeting组件中将name作为一个属性来定制，这样可以复用这一组件来制作各种不同的“问候语”。 上面的例子把Greeting组件写在 JSX 语句中，用法和内置组件并无二致——。

仅仅使用props和基础的Text、Image以及View组件，你就已经足以编写各式各样的 UI 组件了。

注意

传递的props可以是任意对象，可以是一个函数，一个组件，一个负责的数据对象。在 父子组件数据交换的时候经常用到它。