上一遍文章已經(jīng)了解了元素的概念，大多數(shù)元素是可以在創(chuàng)建的時(shí)候通過不同的參數(shù)被個(gè)性化（Customized）的丁侄。這些參數(shù)就叫做prop惯雳。
例如，一個(gè)基本的RN元素Image鸿摇。當(dāng)你創(chuàng)建一個(gè)圖片視圖是石景，你可以通過使用名為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內(nèi)容潮孽。
自己定義的元素個(gè)可以使用prop，這使得你可以定義一個(gè)元素并在app中通過設(shè)置不同的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作為一個(gè)prop來定制化Greeting元素佛舱，是的我們可以在JSX中復(fù)用Greeting元素椎例。view元素是一個(gè)視圖容器元素。
State
本文了解了使用porp來定制化元素请祖，想要使是界面變化订歪，下面需要了解stat概念。想要控制一個(gè)元素损拢，需要把握兩個(gè)概念，prop和state撒犀。如果許具需要變化福压，就需要使用state了。
在構(gòu)造方法中初始化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);
在實(shí)際的App中映凳，state可能會(huì)根據(jù)服務(wù)器數(shù)據(jù)的變化胆筒，或者用戶輸入的變化而變化。你可以使用類似于Redux的state容器來操作state而不是視同setState方法。
在React Native中仆救，State的使用方法和React中的一樣抒和，想要更詳細(xì)的了解state的操作，可以閱讀 React.Component API
小結(jié)
通過prop 和 state可實(shí)現(xiàn)對(duì)元素的操控彤蔽，如果想要是的頁(yè)面更美觀摧莽，下面就需要理解Style了。
