大多数组件在创建时就可以使用各种参数来进行定制。用于定制的这些参数就称为props（[prɒps]属性）。
以常见的基础组件 Image 为例，在创建一个图片时，可以传入一个名为 source 的 prop来指定要显示的图片的地址，以及使用名为 style 的prop 来控制其尺寸。
import React, { Component } from 'react';
import { AppRegistry, Image } from 'react-native';
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}} />
);
}
}
AppRegistry.registerComponent('Bananas', () => Bananas);
备注： ATS 不然获取不到图片
请注意 {pic} 外围有一层括号，我们需要用括号来把 pic 这个变量嵌入到 JSX 语句中。括号的意思是： 括号内部为一个 js变量 或表达式，需要执行后取值。因此我们可以把任意合法的 JavaScript 表达式通过括号嵌入到 JSX 语句中。
重点来了：
自定义的组件也可以使用props。通过在不同的场景使用不同的属性定制，可以尽量提高自定义组件的复用范畴。只需在render函数中引用this.props，然后按需处理即可。
import React, { Component } from 'react';
import { AppRegistry, Text, View } from 'react-native';
class Greeting extends Component {
render() {
return (
<Text>Hello {this.props.name}!</Text>
);
}
}
class LotsOfGreetings extends Component {
render() {
return (
<View style={{alignItems: 'center'}}>
<Greeting name='Rexxar' />
<Greeting name='Jaina' />
<Greeting name='Valeera' />
</View>
);
}
}
AppRegistry.registerComponent('LotsOfGreetings', () => LotsOfGreetings);
我们在 Greeting 组件中将 name 作为一个属性来定制，这样可以复用这一组件来制作各种不同的“问候语”。上面的例子把Greeting
组件写在 JSX 语句中，用法和内置组件并无二致,
—— 这正是React体系的魅力所在。
上面的例子出现了一样新的名为 View
的组件。View
常用作其他组件的容器，来帮助控制布局和样式。
仅仅使用 props 和基础的 Text、Image
以及 View
组件，你就已经足以编写各式各样的UI组件了。
自己的代码：
/**
* Sample React Native App
* https://github.com/facebook/react-native
* @flow
*/
import React, { Component } from 'react';
import {
AppRegistry, // re dʒɪs trɪ 注册
Image,
View,
Text
} from 'react-native';
class Greeting extends Component {
// [ɪk's ten dz] 延伸
// [kəm'po nənt] 组件
render() {
// [rendə] 提出
return (
<Text>Hello {this.props.name}!</Text>
);
}
}
class MyApp extends Component {
render() {
return(
<View style= {{alignItem:'center'}}>
<Greeting name='Rexxar' />
<Greeting name='Jaina' />
<Greeting name='Valeera' />
</View>
);
}
}
AppRegistry.registerComponent('MyApp', () => MyApp);
/*
class MyApp extends Component {
render() {
let pic = {
uri: 'https://upload.wikimedia.org/wikipedia/commons/d/de/Bananavarieties.jpg'
};
return (
<Image source = {pic} style = {{width: 320,height: 320}} />
);
}
}
AppRegistry.registerComponent('MyApp', () => MyApp);
*/
效果图：
