react native中的屬性、狀態、樣式的理解
Props(屬性)
大多陣列件在建立時就可以使用各種引數來進行定製。用於定製的這些引數就稱為props。
以常見的基礎元件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);
注意到{pic}外圍有一層括號，我們需要來把pic這個變數嵌入到JSX語句中。括號的意思是括號內部為一個js變數或表示式，需要執行後取值。因此我們可以把任意合法的JavaScript表法師通過括號嵌入到JSX語句中。自定義元件也可以使用props。通過在不同的屬性定製，可以儘量提高自定義元件的複用範疇。只需在render
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體系的魅力所在---
State(狀態)
我們使用兩種資料來控制一個元件：props和state。props是在父元件中指定，而且已經指定，在被指定的元件的生命週期中則不再改變。對於需要改變的資料，我們需要使用state。
一般來說，你需要在constructor中初始化state（這是ES6的寫法），然後在需要修改時呼叫setState方法。
假如需要製作一段不停閃爍的文字。文字的內容本身在元件建立時就已經指定好了，所以文字內容應該是一個prop。而文字的顯示或隱藏的狀態（快速的顯隱切換就產生了閃爍的效果）則是隨著時間變化的，因此這一狀態應該寫在state中。
import React, { Component } from 'react';
import { AppRegistry, Text, View } from 'react-native';
class Blink extends Component {
constructor(props) {
super(props);
this.state = { showText: true };
// 每1000毫秒對showText狀態做一次取反操作
setInterval(() => {
this.setState(previousState => {
return { showText: !previousState.showText };
});
}, 1000);
}
render() {
// 根據當前showText的值決定是否顯示text內容
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);
實際開發中，我們一般不會在定時器函式（setInterval、setTimeout等）中來操作state。典型的場景是在接收到伺服器返回的新資料，或者在使用者輸入資料之後。你也可以使用一些“狀態容器”比如Redux來統一管理資料流。
State的工作原理和React.js完全一致，所以對於處理state
樣式
在React Native中，你並不需要學習什麼特殊的語法來定義樣式。我們仍然使用JavaScript來寫樣式。所有的核心元件都接受名為style的屬性。這些樣式名基本上是遵循了web上的CSS命名，只是按照JS的語法要求使用了駝峰命名法，例如將 background-color改為backgroundColor
style屬性可以是一個普通的JavaScript物件，這是最簡單的用法，因而在例項程式碼中很常見。你還可以傳入一個數組 — — 在陣列中位置居後的樣式比居前的優先順序更高，這樣你可以間接實現樣式的繼承。
實際開發中元件的樣式會越來越複雜，建議使用StyleSheet.create來集中定義元件的樣式。
import React, { Component } from 'react';
import { AppRegistry, StyleSheet, Text, View } from 'react-native';
class LotsOfStyles extends Component {
render() {
return (
<View>
<Text style={styles.red}>just red</Text>
<Text style={styles.bigblue}>just bigblue</Text>
<Text style={[styles.bigblue, styles.red]}>bigblue, then red</Text>
<Text style={[styles.red, styles.bigblue]}>red, then bigblue</Text>
</View>
);
}
}
const styles = StyleSheet.create({
bigblue: {
color: 'blue',
fontWeight: 'bold',
fontSize: 30,
},
red: {
color: 'red',
},
});
AppRegistry.registerComponent('LotsOfStyles', () => LotsOfStyles);
常見的做法是按順序宣告和使用style屬性，以借鑑CSS中的“層疊”做法（即後宣告的數學系會顛覆先宣告的同名屬性）