React Native学习-03-Props、State

上一遍文章已经了解了元素的概念，大多数元素是可以在创建的时候通过不同的参数被个性化（Customized）的。这些参数就叫做prop。
例如，一个基本的RN元素Image。当你创建一个图片视图是，你可以通过使用名为source的prop来指明图片的资源地址来显示不同的图片。

import React, { Component } from 'react';
import { AppRegistry, Image } from 'react-native';

class Bananas extends Component {
  render() {
    let pic = {
      uri: 'https://imgsa.baidu.com/baike/c0%3Dbaike92%2C5%2C5%2C92%2C30/sign=307b5bee8744ebf8797c6c6db890bc4f/32fa828ba61ea8d3a60416e9970a304e251f583c.jpg'
    };
    return (
      
    );
  }
}

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

注意上述代码中的 {pic},在JSX中键入变量pic。在JSX中可以在{ }中仿佛JavaScript内容。

自己定义的元素个可以使用prop，这使得你可以定义一个元素并在app中通过设置不同的prop多次使用它。在 render 方法中使用this.props，如下：

import React, { Component } from 'react';
import { AppRegistry, Text, View } from 'react-native';

class Greeting extends Component {
  render() {
    return (
      Hello {this.props.name}!
    );
  }
}

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

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

上述，name作为一个prop来定制化Greeting元素，是的我们可以在JSX中复用Greeting元素。view元素是一个视图容器元素。

State

本文了解了使用porp来定制化元素，想要使是界面变化，下面需要了解stat概念。想要控制一个元素，需要把握两个概念，prop和state。如果许具需要变化，就需要使用state了。
在构造方法中初始化state，之后使用setState来改变它。例如，想要使字符闪烁：

import React, { Component } from 'react';
import { AppRegistry, Text, View } from 'react-native';

class Blink extends Component {
  constructor(props) {
    super(props);
    this.state = {showText: true};

    // Toggle the state every second
    setInterval(() => {
      this.setState({ showText: !this.state.showText });
    }, 1000);
  }

  render() {
    let display = this.state.showText ? this.props.text : ' ';
    return (
      {display}
    );
  }
}

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

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

在实际的App中，state可能会根据服务器数据的变化，或者用户输入的变化而变化。你可以使用类似于Redux的state容器来操作state而不是视同setState方法。

在React Native中，State的使用方法和React中的一样，想要更详细的了解state的操作，可以阅读 React.Component API

小结

通过prop 和 state可实现对元素的操控，如果想要是的页面更美观，下面就需要理解Style了。