Back

reactnative - 8. state

发布时间: 2018-12-22 08:30:00

参考：https://facebook.github.io/react-native/docs/state

在React native中， 一次赋值之后就不变的，用props ，典型例子： <Book name="三体"/> 这里的name是固定不变的

赋值之后， 会发生变化的变量， 用state . 典型的例子：

某个页面需要从远程读取数据。 （例如变量名字叫 remote_book_name）

1. 页面刚刚打开时 ，对应的内容是空白的。 remote_book_name = ''

2. 页面发起http request

3. 该页面获得了远程的结果， 把结果赋值给 remote_book_name = "决斗在网络"

可以看到，上面例子中，这个变量是随着程序的状态发生变化的，所以是个典型的 state.

下面是一个例子：

(screens/StateDemo.js) 

import React,  { Component} from 'react';
import {Image, Platform, StyleSheet, Text, View, Button} from 'react-native'

export default class MyFavorateBooks extends Component{
  constructor(props){
    super(props)
    this.state = {
      isToChange: false
    }
  }
  // 由于 state变量的每次发生变化，都是跟之前的有一定的关系的， 所以这里的函数有一个参数: previousState
  change = () => {
    this.setState(previousState => (
      {
        isToChange: !previousState.isToChange
      }
    ))
  }

  // 为了演示方便，我没有把下面的代码做重构， 直接用最原始的方式来表现了。
  render(){
    if(!this.state.isToChange){
      return(
        <View>
          <Text>早上起来， 拥抱太阳 </Text>
          <Button
            title="看下一句歌词"
            onPress={this.change}
            />
        </View>
      )
    }
    else{
      return(
        <View>
          <Text>让身体充满， 灿烂的阳光！ </Text>
          <Button
            title="看前一句歌词"
            onPress={this.change}
            />
        </View>
      )
    }
  }
}

从Home.js页面加上入口，在App.js文件中加上路由之后， 就可以打开这个页面了

点击按钮，就可以看到页面的文字发生了变化

Back