[TOC]

概述

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
import React, { Component } from 'react';
import { Image } from 'react-native';

export default 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}} />
    );
  }
}

译注：在 iOS 上使用 http 链接的图片地址可能不会显示，参见这篇说明修改。从 Android19 开始，也会默认阻止 http 请求，请参考相关配置

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 *
 * @format
 * @flow
 */

import React, {Component} from 'react';
// 从“react-native” 导入以下这些控件
import {Platform, StyleSheet, Text, View,Image} from 'react-native';

const instructions = Platform.select({
  ios: 'Press Cmd+R to reload,\n' + 'Cmd+D or shake for dev menu',
  android:
    'Double tap R on your keyboard to reload,\n' +
    'Shake or press menu button for dev menu',
});

type Props = {};
export default class App extends Component<Props> {
  render() {
    // 声明图片
    let pic = {
        uri: 'https://upload.wikimedia.org/wikipedia/commons/d/de/Bananavarieties.jpg'
      };

    return (
      // 给整体的VIew设置相同的属性。属性字段为styles.container
      <View style={styles.container}>
        <Text style={styles.welcome}>Welcome to React Native!</Text>
        <Text style={styles.instructions}>To get started, edit App.js</Text>
        <Text style={styles.instructions}>{instructions}</Text>
        {/* 添加自定义组件 */}
        <CustomViewComponent name = "欢迎学习RN"/>
        {/* 通过source 和style这两个属性来给图片设置样式 */}
        <Image source={pic} style={{width: 193, height: 110}} />
      </View>
    );
  }
}

// 通过StyleSheet的来创建样式。通过创建
const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#C5FCFF',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    color: '#FE3333',
    margin: 10,
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  },
});


// 我们可以通过继承自Components来创建自定义组件
/**
 * 创建一个自定义View的组件
 */
class CustomViewComponent extends Component {
    render() {
      return (
        <View style={{alignItems: 'center', marginTop: 50}}>
          {/* 自定义组件里面比较简单，其实就是一个自定义的Text的View */}
          {/* 我们可以通过传入自定义组件的属性字段，来设置名字 */}
          <Text>你好 {this.props.name}!</Text>
        </View>
      );
    }
  }


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

上面的例子出现了一样新的名为View的组件。View 常用作其他组件的容器，来帮助控制布局和样式。

仅仅使用props和基础的Text、Image以及View组件，你就已经足以编写各式各样的 UI 组件了。要学习如何动态修改你的界面，那就需要进一步学习 State（状态）的概念。