大多數初學react native 的人，對此深有困惑，故，再次分享一篇react native 的入門解惑篇
一：Props(屬性)
大多數元件在建立時就可以使用各種參數來進行自訂。用於自訂的這些參數就稱為props（屬性）。 props是在父元件中指定，而且一經指定，在被指定的元件的生命週期中則不再改變
透過在不同的場景使用不同的屬性定制，可以盡量提高自訂元件的複用範疇。只要在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>
<greeting></greeting>
<greeting></greeting>
<greeting></greeting>
</view>
);
}
}
AppRegistry.registerComponent('LotsOfGreetings', () => LotsOfGreetings);
二：State（狀態）
我們使用兩個資料來控制一個元件：props和state。 props是在父元件中指定，而且一經指定，在被指定的元件的生命週期中則不再改變。 對於需要改變的數據，我們需要使用state。
一般來說，你需要在constructor中初始化state（翻譯：這是ES6的寫法，早期的許多ES5的例子使用的是getInitialState方法來初始化state，這個做法會逐漸被淘汰），然後在需要修改時呼叫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({ showText: !this.state.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></blink>
<blink></blink>
<blink></blink>
<blink></blink>
</view>
);
}
}
AppRegistry.registerComponent('BlinkApp', () => BlinkApp);
2:
import React, { Component } from 'react';
import { AppRegistry, Text, TextInput, View } from 'react-native';
class PizzaTranslator extends Component {
constructor(props) {
super(props);
this.state = {text: ''};
}
render() {
return (
<view>
<textinput> this.setState({text})}
/>
<text>
{this.state.text.split(' ').map((word) => word && '</text></textinput></view>以上是React Native的入門篇的詳細內容。更多資訊請關注PHP中文網其他相關文章！
