React Native 基础（一）

上篇就做了个初始化，这次来点实际的。

写RN我建议用webstorm，很强大的一款IDE。打开我们的项目：

简单看一下项目结构：

__test__:  jest单元测试，表示没耍过。

android: 安卓项目文件

ios: iOS项目文件

node_module: 依赖库

余下的是一些配置文件以及项目入口文件 index.xxx.js。我们上篇之中运行的代码其实就是index.ios.js中的代码。

说到代码，不得不说一下RN的语法了，RN顾名思义就是用React写Native App，React使用jsx编写，就是js+xml，没什么特别高端的地方。这里我们大部分使用ES6的语法来写js。

1、组件

一开始就开始说组件不知道会不会太快，组件是什么？我个人理解就是一个可重复使用的模块，Don‘t repeat yourself，不要写重复的代码。

react中的组件称之为Component，这是react提供的一个基类，我们写的所有组件其实都是继承自Component。

我新建了一个Treasures的项目，react生成的index.xxx.js中就写了一个与项目同名的组件Treasures，这个组件是作为app 入口组件，文件底部写了注册app接口：

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

2、组件的生命周期

constructor: 构造器，这里最主要的功能就是初始化组件的state。

componentWillMount: 渲染之前，做数据请求即处理喽，以便后面渲染出来。

render: 渲染(必须)，没什么可说的，别忘了return。

componentDidMount: 渲染完成后，这个再React Web端是非常用的，可以用jquery处理组件，但是再RN中，可能就是一下小处理了。

componentWillUnmount: 移除组件前，移除组件的时候有时也需要处理一些东西吧哈哈。

简单的开发主要用到上面这几种，还有其余的生命周期函数我们用的的时候再说。

3、props & state

props和state可谓是react里的精髓了，通过props在组件之间传递数据，通过state动态改变组件。什么意思呢？先说props，我们写一个组件比如说一个Button，组件名叫MyButton

<TouchableHighlight style={{backgroundColor: '#FFFFFF'}}>

       <Text>我是Button</Text>

</TouchableHighlight>

我在别的地方调用这个<MyButton />就会出现一个黑色的按钮。但如果我想要白色的按钮呢？这TM就尴尬了。。。所以我们需要把color作为props，这样别的地方就可以通过给这个props值来生成不一样颜色的MyButton。如下：

<TouchableHighlight style={{backgroundColor: this.props.color}}>

        <Text>我是Button</Text>

</TouchableHighlight>

这个时候我们需要这样调用:

<MyButton color={'#000000'} />

这样就可以想要什么颜色就有什么颜色的button了，Nice！

再说一下state吧，我们又一个选数量的组件，就像这样：

我点减号中间的数字减1，点加号加1。这个组件很常用，我希望把它写成一个组件，怎么写呢：

... <Text> {this.state.num} </Text> ...

左右按钮就不写出来了，分别是点击之行plus和minus函数，我们看一下plus函数怎么写：

plus(){

        this.setState({

                num: this.state.num + 1

        })

}

这里要注意的是state必须通过setState来改变，这里面牵扯到React内部的机制。这样就实现了我们所需要的，并且在点击的时候只刷新了中间的数字。这就是典型MVVM设计思想，不得不佩服。

讲到这其实React中的组件不管是在Web还是Native都是一样的。差别就是Web端可能是用<div>这样的标签，我们也可以理解为组件，RN中是用View组件。

这一部分就说到这吧，顺便说说这个组件的思想。我们在React中所有展现出来的都是基于Component，大到一整个页面，小到一个按钮。一个组件就是一种标签，如何细分组件就是一门艺术了哈哈哈哈哈。下次我们再说点别的哟西！