React native之路(九)理解State

React native的組件可以通過兩種方式進(jìn)行狀態(tài)控制,一種是Props用來設(shè)置不會(huì)改變的數(shù)據(jù),另一種就是State嚼沿,用來設(shè)置會(huì)變換的數(shù)據(jù)宣脉。State相當(dāng)重要车柠,所有的UI界面變化都離不開State。
State的使用方式是:

  1. 在組件的構(gòu)造函數(shù)中初始化State;
  2. 在合適的地方調(diào)用setState方法竹祷;

首先來看官方的例子谈跛,官方給出了一個(gè)文字閃爍的效果,具體代碼

class Blink extends Component {
  constructor(props) {
      super(props);
      this.state = {showText: true};//這里設(shè)置了一個(gè)boolean型的showText塑陵,默認(rèn)值為true感憾;

      // Toggle the state every second
      setInterval(() => {
        this.setState({ showText: !this.state.showText });
      }, 1000);//這里是一個(gè)定時(shí)器,每1s會(huì)執(zhí)行一次令花,調(diào)用定時(shí)器中的方法阻桅,重新給state賦值,注意this.state.showText是獲取當(dāng)前showText的值兼都,同時(shí)需要注意的是調(diào)用this.setState()后回自動(dòng)調(diào)用 render() 方法從而實(shí)現(xiàn)界面的刷新嫂沉。
    }
    render() {
      let display = this.state.showText ? this.props.text : ' ';//這里通過showText 的值決定diaplay的值,如果為ture 則顯示this.props.text屬性的值扮碧,否則顯示‘ ’趟章,this.props.text為自定義屬性,let等同于var慎王;
      return (
        <Text>{display}</Text>
      );
    }
  }

在啟動(dòng)組件中使用

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);

顯示結(jié)果如下:


再來看一個(gè)其他的例子:
我們要實(shí)現(xiàn)這樣一個(gè)效果



點(diǎn)擊按鈕改變按鈕的背景色尤揣,來看代碼

class MyButton extends Component{
  constructor(props) {
    super(props);
    this.state = {clickable:false};
  }

  toggleColor=()=> {
    this.setState({
      clickable:!this.state.clickable
    })
  }

  render(){
    return(
        <TouchableOpacity onPress={this.toggleColor}>
          <View style={{justifyContent:'center',alignItems:'center',width:100,height:56,backgroundColor:this.state.clickable?'#ff00ff':'#00ffff'}}>
          <Text >點(diǎn)我</Text>
          </View>
        </TouchableOpacity>
      );
  }
}

具體流程如下:
1 定義了一個(gè)MyButton 組件;
2在MyButton 的構(gòu)造函數(shù)中聲明了一個(gè)clickable柬祠;
3定義一個(gè)toggleColor方法并在其中通過this.setState完成clickable值的改變北戏;
4在render函數(shù)中通過TouchableOpacity 自定義了一個(gè)button,并通過onPress調(diào)用toggleColor方法漫蛔。

調(diào)用MyButton

class HelloWorld extends Component{
  render(){
    return(
        <View style={{justifyContent:'center',alignItems:'center',flex:1}}>
            <MyButton/>
        </View>
      );
  }
}

顯示效果如上圖所示嗜愈。
State的使用也就是這些了,關(guān)鍵是記住其使用方式即可莽龟。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末蠕嫁,一起剝皮案震驚了整個(gè)濱河市,隨后出現(xiàn)的幾起案子毯盈,更是在濱河造成了極大的恐慌剃毒,老刑警劉巖,帶你破解...
    沈念sama閱讀 222,681評(píng)論 6 517
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件搂赋,死亡現(xiàn)場(chǎng)離奇詭異赘阀,居然都是意外死亡,警方通過查閱死者的電腦和手機(jī)脑奠,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,205評(píng)論 3 399
  • 文/潘曉璐 我一進(jìn)店門基公,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人宋欺,你說我怎么就攤上這事轰豆∫任椋” “怎么了?”我有些...
    開封第一講書人閱讀 169,421評(píng)論 0 362
  • 文/不壞的土叔 我叫張陵酸休,是天一觀的道長(zhǎng)骂租。 經(jīng)常有香客問我,道長(zhǎng)斑司,這世上最難降的妖魔是什么渗饮? 我笑而不...
    開封第一講書人閱讀 60,114評(píng)論 1 300
  • 正文 為了忘掉前任,我火速辦了婚禮陡厘,結(jié)果婚禮上抽米,老公的妹妹穿的比我還像新娘特占。我一直安慰自己糙置,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 69,116評(píng)論 6 398
  • 文/花漫 我一把揭開白布是目。 她就那樣靜靜地躺著谤饭,像睡著了一般。 火紅的嫁衣襯著肌膚如雪懊纳。 梳的紋絲不亂的頭發(fā)上揉抵,一...
    開封第一講書人閱讀 52,713評(píng)論 1 312
  • 那天,我揣著相機(jī)與錄音嗤疯,去河邊找鬼冤今。 笑死,一個(gè)胖子當(dāng)著我的面吹牛茂缚,可吹牛的內(nèi)容都是我干的戏罢。 我是一名探鬼主播,決...
    沈念sama閱讀 41,170評(píng)論 3 422
  • 文/蒼蘭香墨 我猛地睜開眼脚囊,長(zhǎng)吁一口氣:“原來是場(chǎng)噩夢(mèng)啊……” “哼龟糕!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起悔耘,我...
    開封第一講書人閱讀 40,116評(píng)論 0 277
  • 序言:老撾萬榮一對(duì)情侶失蹤讲岁,失蹤者是張志新(化名)和其女友劉穎,沒想到半個(gè)月后衬以,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體缓艳,經(jīng)...
    沈念sama閱讀 46,651評(píng)論 1 320
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 38,714評(píng)論 3 342
  • 正文 我和宋清朗相戀三年看峻,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了郎任。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 40,865評(píng)論 1 353
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡备籽,死狀恐怖舶治,靈堂內(nèi)的尸體忽然破棺而出分井,到底是詐尸還是另有隱情,我是刑警寧澤霉猛,帶...
    沈念sama閱讀 36,527評(píng)論 5 351
  • 正文 年R本政府宣布尺锚,位于F島的核電站,受9級(jí)特大地震影響惜浅,放射性物質(zhì)發(fā)生泄漏瘫辩。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 42,211評(píng)論 3 336
  • 文/蒙蒙 一坛悉、第九天 我趴在偏房一處隱蔽的房頂上張望伐厌。 院中可真熱鬧,春花似錦裸影、人聲如沸挣轨。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,699評(píng)論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽卷扮。三九已至,卻和暖如春均践,著一層夾襖步出監(jiān)牢的瞬間晤锹,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 33,814評(píng)論 1 274
  • 我被黑心中介騙來泰國打工彤委, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留鞭铆,地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 49,299評(píng)論 3 379
  • 正文 我出身青樓焦影,卻偏偏與公主長(zhǎng)得像车遂,于是被迫代替她去往敵國和親。 傳聞我的和親對(duì)象是個(gè)殘疾皇子偷办,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,870評(píng)論 2 361

推薦閱讀更多精彩內(nèi)容