React Native基础：3-属性Props

大部分封装好的组件，都可以通过设置它们的属性Props来定制界面和行为。比如Text组件有一个numberOfLines属性，这个属性控制组件显示几行。如下面的代码所示，如果设置该属性的值为2，那么无论文字的内容有多少，Text组件最多会显示两行文本。

<Text numberOfLines=2> 不论文字有多少，最多显示2行，...<Text>

Props是组件对外提供的一个窗口，用来和外界进行沟通。现在我们来自定义一个Hello组件，在AwesomeProject项目的index.ios.js文件中添加如下代码。

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

class Hello extends Component {
  render() {
    return (
      <Text>Hello {this.props.name}!</Text>
    );
  }
}

export default class AwesomeProject extends Component {
  render() {
    return (
      <View style={styles.container}>
        <Hello name="99iOS"/>
        <Hello name="shixin"/>
        <Hello name="hugo"/>
      </View>
    );
  }
}

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

AppRegistry.registerComponent('AwesomeProject', () => AwesomeProject);

在上面的示例代码中，使用了一样新的名为View的组件。View 常用作其他组件的容器，用于帮助控制布局和样式。另外，在代码中我们还使用到了样式，这个在后面的内容中会重点介绍。

我们自定义了一个Hello组件，在屏幕上绘制“Hello xxx!”的一段话。而xxx的具体值是在使用组件的地方通过属性name传递进来的。上面的示例代码中，在View内有三个Hello组件, 并且分别设置了它们的name属性。

        <Hello name="99iOS"/>
        <Hello name="shixin"/>
        <Hello name="hugo"/>

代码更新完成后，在终端中输入react-native run-ios命令，运行代码，耐心的等待应用的编译运行，最终会看到下面的效果。

下一节我们会学习一下React Native中的State（状态），State和Props最大的区别是Props不能在组件内部被修改，而State可以。

---