上一遍文章已经了解了元素的概念，大多数元素是可以在创建的时候通过不同的参数被个性化（Customized）的。这些参数就叫做prop。
例如，一个基本的RN元素Image。当你创建一个图片视图是，你可以通过使用名为source的prop来指明图片的资源地址来显示不同的图片。
import React, { Component } from 'react';
import { AppRegistry, Image } from 'react-native';
class Bananas extends Component {
render() {
let pic = {
uri: 'https://imgsa.baidu.com/baike/c0%3Dbaike92%2C5%2C5%2C92%2C30/sign=307b5bee8744ebf8797c6c6db890bc4f/32fa828ba61ea8d3a60416e9970a304e251f583c.jpg'
};
return (
<Image source={pic} style={{width: 193, height: 110}}/>
);
}
}
AppRegistry.registerComponent('Bananas', () => Bananas);
注意上述代码中的 {pic},在JSX中键入变量pic。在JSX中可以在{ }中仿佛JavaScript内容。
自己定义的元素个可以使用prop，这使得你可以定义一个元素并在app中通过设置不同的prop多次使用它。在 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);
上述，name作为一个prop来定制化Greeting元素，是的我们可以在JSX中复用Greeting元素。view元素是一个视图容器元素。
State
本文了解了使用porp来定制化元素，想要使是界面变化，下面需要了解stat概念。想要控制一个元素，需要把握两个概念，prop和state。如果许具需要变化，就需要使用state了。
在构造方法中初始化state，之后使用setState来改变它。例如，想要使字符闪烁：
import React, { Component } from 'react';
import { AppRegistry, Text, View } from 'react-native';
class Blink extends Component {
constructor(props) {
super(props);
this.state = {showText: true};
// Toggle the state every second
setInterval(() => {
this.setState({ showText: !this.state.showText });
}, 1000);
}
render() {
let display = this.state.showText ? this.props.text : ' ';
return (
<Text>{display}</Text>
);
}
}
class BlinkApp extends Component {
render() {
return (
<View>
<Blink text='I love to blink' />
<Blink text='Yes blinking is so great' />
<Blink text='Why did they ever take this out of HTML' />
<Blink text='Look at me look at me look at me' />
</View>
);
}
}
AppRegistry.registerComponent('BlinkApp', () => BlinkApp);
在实际的App中，state可能会根据服务器数据的变化，或者用户输入的变化而变化。你可以使用类似于Redux的state容器来操作state而不是视同setState方法。
在React Native中，State的使用方法和React中的一样，想要更详细的了解state的操作，可以阅读 React.Component API
小结
通过prop 和 state可实现对元素的操控，如果想要是的页面更美观，下面就需要理解Style了。
