Props参数传递

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

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

修改HelloWorld/src/page1.js如下：

• 添加 Image 组件

import {
    StyleSheet,
    Text,
    View,
    Image
} from 'react-native';

• 给 Image 配置 style

const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#F5FCFF',
    },
    image:{
        width:200,
        height:200
    }
});

• 修改 render()

export default class Page1 extends Page {
    render() {
        let pic = {uri:"http://m.vstou.com/img/201510/dm1_5.jpg"}
        return (

<
ViewPort
>
<
Image source={pic} style={styles.image}
>
<
/Image
>
<
/ViewPort
>

        );
    }
}

请注意{pic}外围有一层括号，我们需要用括号来把pic这个变量嵌入到JSX语句中。括号的意思是括号内部为一个js变量或表达式，需要执行后取值。因此我们可以把任意合法的JavaScript表达式通过括号嵌入到JSX语句中。

效果图：

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

'use strict';

import React, { Component } from 'react';

import {
    StyleSheet,
    Text,
    View,
    Image
} from 'react-native';

import {
    Page,
    Button,
    ViewPort
} from '@ctrip/crn';


class Greeting extends Component {
  render() {
    return (

<
Text
>
Hello {this.props.name}!
<
/Text
>

    );
  }
}


export default class Page1 extends Page {
    render() {
        let pic = {uri:"http://m.vstou.com/img/201510/dm1_5.jpg"}
        return (

<
ViewPort
>
<
Image source={pic} style={styles.image}
>
<
/Image
>
<
Greeting name='CRN'
>
<
/Greeting
>
<
/ViewPort
>

        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#F5FCFF',
    },
    image:{
        width:200,
        height:200
    }
});

我们在Greeting组件中将name作为一个属性来定制，这样可以复用这一组件来制作各种不同的“问候语”。上面的例子把Greeting组件写在JSX语句中，用法和内置组件并无二致——这正是React体系的魅力所在——如果你想搭建一套自己的基础UI框架，那就放手做吧！