大多數初學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:
以上是React Native的入門篇的詳細內容。更多資訊請關注PHP中文網其他相關文章!