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

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

先安利:https://github.com/ddwhan0123/Useful-Open-Source-Android
今天又加了几个疑难杂症哦！！

上一篇讲了属性，这一篇主要讲 State Style，给出上次的传送门，以便有更好的连贯性:http://www.52php.cn/article/p-hbdcddif-w.html

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,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/> 充分解释了

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

这个概念！！

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