上一遍文章已經了解了元素的概念，大多數元素是可以在創建的時候通過不同的參數被個性化（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了。
