我們可以為大多數(shù)組件定制各種參數(shù)，用于定制的這些參數(shù)就稱為props（屬性）。
屬性的自定義 Props
以Image 為例，在創(chuàng)建圖片的時候绵估，可以傳入一個名為source的prop來指定要顯示的圖片的地址
import React, { Component } from 'react';
import { AppRegistry, Image } from 'react-native';
class AwesomeProject extends Component {
render() {
let pic = {
uri: 'https://imgsa.baidu.com/baike/c0%3Dbaike180%2C5%2C5%2C180%2C60/sign=ca5abb5b7bf0f736ccf344536b3cd87c/29381f30e924b899c83ff41c6d061d950a7bf697.jpg
};
return (
<Image source={pic} style={{width: 193, height: 110}} />
);
}
}
{pic}外圍的一層括號，我們需要用括號來把pic這個變量嵌入到JSX語句中贷岸。括號內(nèi)部為一個js變量或表達(dá)式壹士，需要執(zhí)行后取值。因此我們可以把任意合法的JavaScript表達(dá)式通過括號嵌入到JSX語句中偿警。
自定義的組件也可以使用props躏救，在不同的場景使用不同的屬性定制，可以盡量提高自定義組件的復(fù)用范疇螟蒸，在render函數(shù)中引用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 AwesomeProject extends Component {
render() {
return (
<View style={{alignItems: 'center'}}>
<Greeting name='Rexxar' />
</View>
);
}
}
把name作為一個屬性來定制盒使，這樣可以復(fù)用來制作不同場景的使用，將Greeting寫入JSX語句中七嫌，用法和內(nèi)置組件沒有任何區(qū)別少办，如果想定義自己的控件將是個不錯的選擇。
狀態(tài) State
props是在父組件中指定诵原，而且一經(jīng)指定英妓，在被指定的組件的生命周期中則不再改變。 對于需要改變的數(shù)據(jù)绍赛，我們需要使用state蔓纠。
你需要在constructor中初始化State(這是ES6的寫法，這里忽略早起ES5)吗蚌，修改時調(diào)用setState方法腿倚。ES6傳送門
這是一個簡單的例子，點(diǎn)擊控件觸發(fā)onPress來記錄點(diǎn)擊次數(shù)蚯妇，順便看一下state的調(diào)用順序
import React, { Component } from 'react';
import { AppRegistry, StyleSheet, Text, View , Image} from 'react-native';
class Blink extends Component {
constructor(props) {
super(props);
this.state = {times: 0}
}
timePlus() {
let times = this.state.times
times ++
this.setState({
times: times
})
}
//組件即將安裝
componentWillMount() {
console.log('componentWillMount')
}
render() {
console.log('render')
return(
//布局使用創(chuàng)建RN時的默認(rèn)布局
<View style={styles.container}>
<Text style={styles.welcome} onPress={this.timePlus.bind(this)}>
你點(diǎn)了我 {this.state.times} 次
</Text>
</View>
)
}
//已經(jīng)安裝
componentDidMount() {
console.log('componentDidMount')
}
//是否需要更新
shouldComponentUpdate() {
console.log('shouldComponentUpdate')
return true
}
//將要更新 state
componentWillUpdate() {
console.log('componentWillUpdate')
}
//已經(jīng)更新 中間會調(diào)用 render()
componentDidUpdate() {
console.log('componentDidUpdate')
}
}
});
我們可以看一下RN的簡單生命周期
接下來我點(diǎn)擊控件觸發(fā) onPress
這里大概就是RN State 一個簡單的生命周期
理解
在真正的應(yīng)用程序中敷燎，當(dāng)服務(wù)器或用戶輸入到達(dá)新數(shù)據(jù)時，可以設(shè)置狀態(tài)箩言。 還可以使用像Redux這樣的狀態(tài)容器來控制數(shù)據(jù)流硬贯。 在這種情況下，將使用Redux來修改狀態(tài)陨收，而不是直接調(diào)用setState饭豹。
如果無法加載圖片，請在info.plst文件中添加如下配置，支持http方式訪問
<key>NSAppTransportSecurity</key>
<dict>
<key>NSExceptionDomains</key>
<dict>
<key>qq.com</key>
<dict>
<key>NSIncludesSubdomains</key>
<true/>
</dict>
<key>sina.com.cn</key>
<dict>
<key>NSIncludesSubdomains</key>
<true/>
</dict>
</dict>
</dict>
