React native之路(九)理解State

React native的组件可以通过两种方式进行状态控制,一种是Props用来设置不会改变的数据,另一种就是State,用来设置会变换的数据。State相当重要,所有的UI界面变化都离不开State。
State的使用方式是:

  1. 在组件的构造函数中初始化State;
  2. 在合适的地方调用setState方法;

首先来看官方的例子,官方给出了一个文字闪烁的效果,具体代码

class Blink extends Component {
  constructor(props) {
      super(props);
      this.state = {showText: true};//这里设置了一个boolean型的showText,默认值为true;

      // Toggle the state every second
      setInterval(() => {
        this.setState({ showText: !this.state.showText });
      }, 1000);//这里是一个定时器,每1s会执行一次,调用定时器中的方法,重新给state赋值,注意this.state.showText是获取当前showText的值,同时需要注意的是调用this.setState()后回自动调用 render() 方法从而实现界面的刷新。
    }
    render() {
      let display = this.state.showText ? this.props.text : ' ';//这里通过showText 的值决定diaplay的值,如果为ture 则显示this.props.text属性的值,否则显示‘ ’,this.props.text为自定义属性,let等同于var;
      return (
        {display}
      );
    }
  }

在启动组件中使用

class BlinkApp extends Component {
  render() {
    return (
      
        
        
        
        
      
    );
  }
}

AppRegistry.registerComponent('BlinkApp', () => BlinkApp);

显示结果如下:


React native之路(九)理解State_第1张图片

再来看一个其他的例子:
我们要实现这样一个效果


React native之路(九)理解State_第2张图片

点击按钮改变按钮的背景色,来看代码

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

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

  render(){
    return(
        
          
          点我
          
        
      );
  }
}

具体流程如下:
1 定义了一个MyButton 组件;
2在MyButton 的构造函数中声明了一个clickable;
3定义一个toggleColor方法并在其中通过this.setState完成clickable值的改变;
4在render函数中通过TouchableOpacity 自定义了一个button,并通过onPress调用toggleColor方法。

调用MyButton

class HelloWorld extends Component{
  render(){
    return(
        
            
        
      );
  }
}

显示效果如上图所示。
State的使用也就是这些了,关键是记住其使用方式即可。

你可能感兴趣的