混合开发的大趋势之一React Native State (状态)，Style（样式）

转载请注明出处：王亟亟的大牛之路

先安利:https://github.com/ddwhan0123/Useful-Open-Source-Android

今天又加了几个疑难杂症哦！！

上一篇讲了属性，这一篇主要讲 State Style，给出上次的传送门，以便有更好的连贯性:http://blog.csdn.net/ddwhan0123/article/details/52238478

State 状态

在RN中用来描述对象的除了属性Props还有状态State,那么状态又是个什么东西呢？

There are two types of data that control a component: props and state. props are set by the parent and they are fixed throughout the lifetime of a component. For data that is going to change, we have to use state.

In general, you should initialize state in the constructor, and then

call setState when you want to change it.

这一段英文很罗嗦但是我们看下关键的信息

1 .props是在父组件中指定，一经指定，在被指定的生命周期中则不再改变

2 .对于需要改变的数据，我们需要使用state

3 .需要在constructor中初始化state，然后在需要修改时调用setState方法。

OH说得好抽象？白话一点就是 props类似于一个final类型的东西，一旦初始化了就无法改变了但是state可以变，而且只要setState就行了，想怎么变都随你，根据业务需求各种set吧！

然后看一个 文字隐藏显示的例子

效果：

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 (
      <Text>{display}</Text>
    );
  }
}

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

在“构造函数”里初始化让他默认为 true

然后调用计时器方法（这部分API以后会介绍），

然后 每次调用都吧state属性设置为相反值。

触发时间为1秒，然后就是图里的效果了。

从头到尾 只在一开始给予Props赋值了文字内容改变的行为都是 state执行的。

这就是state，不太难理解但是常常使用的一个知识点。

状态容器API:http://redux.js.org/index.html

Style 样式

样式这个东西大家肯定不陌生，JS在WEB端的好搭档CSS也在RN出现，来负责“颜值”相关的功能，只是语法稍有变化，我们来看看官方是怎么讲的

官方说了，我们不需要为了样式学什么新的语法，只是他和Web的CSS有一些小小的差异而已，然后举了个background-color的例子.

一个View可以有多个样式属性，他们以数组形势共存，当然如果多个样式出现重复，排在那么右边的会覆盖之前的，具体情况我们看一下他的例子

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

class LotsOfStyles extends Component {
  render() {
    return (
      <View>
        <Text style={styles.red}>just red</Text>
        <Text style={styles.bigblue}>just bigblue</Text>
        <Text style={[styles.bigblue, styles.red]}>bigblue, then red</Text>
        <Text style={[styles.red, styles.bigblue]}>red, then bigblue</Text>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  bigblue: {
    color: ‘blue‘,
    fontWeight: ‘bold‘,
    fontSize: 30,
  },
  red: {
    color: ‘red‘,
  },
});

AppRegistry.registerComponent(‘LotsOfStyles‘, () => LotsOfStyles);

这里的 styles变量有2种样式 一个是bigblue red一个是red然后他们各自有着个自的属性，颜色啊，大小什么的。

例子主要看第三，第四个<Text/> 充分解释了

居后的样式对象比居前的优先级更高，这样你可以间接实现样式的继承

这个概念！！

这篇就到这，希望你能有所收获