React Native学习（Android）——快速生成模板组件

用WebStorm开发（JetBrains同类产品）可以通过设置Live Templates来快速生成模板代码，具体操作如下：

1. File->Settings->Editor->Live Templates
2. 在打开的Live Templates界面的右侧有一个“＋”，点击选择Template Group 来生成一个你自己的快捷组，可以取名为UserConfig
3. 在Live Templates界面中选中UserConfig，再点击“＋”，点击选择Live Template，在Abbreviation中填入你快捷生成代码的指令，如：newjs，在Description中填入你这个快捷指令的作用描述，例如：新建js类模板
4. 将下面的代码复制到Template text中，最下面会红字提示你设置适用场景，点击下面的Define，在弹出的选择框中选择JavaScript and TypeScript。点击Edit variables去配置$之间的内容，不会的自行百度
5. 新建一个js文件，在里面输入newjs后回车键，一个组件模板生成
6. 类似的，可以新建其他模板（如：样式模板、变量模板等）

   /**
    * Created by $Author$ on $Date$
    * Function:
    * Desc:
    */
    import React, {Component} from 'react';
    import {StyleSheet,Text} from 'react-native';
    import PropTypes from 'prop-types';// 现在PropTypes不在react中
    
    export default class $className$ extends Component{
       // 属性检测
       static propTypes = {
           
       };
       // 默认值设置
       static defaultProps = {
           
       };
       // 初始化state
       constructor(props){
           super(props);
           this.state = {};
       }
       // 加载前
       componentWillMount(): void {
           console.log('componentWillMount')
       }
       // 加载后
       componentDidMount(): void {
           console.log('componentDidMount')
       }
       // 接收改变参数( props或者state改变 )
       componentWillReceiveProps(nextProps: Readonly<P>, nextContext: any): void {
           console.log('componentWillReceiveProps')
       }
       // 是否更新( state改变 )
       shouldComponentUpdate(nextProps: Readonly<P>, nextState: Readonly<S>, nextContext: any): boolean {
           console.log('shouldComponentUpdate')
           return true;
       }
       // 更新前
       componentWillUpdate(nextProps: Readonly<P>, nextState: Readonly<S>, nextContext: any): void {
           console.log('componentWillUpdate')
       }
       // 更新后
       componentDidUpdate(prevProps: Readonly<P>, prevState: Readonly<S>, snapshot: SS): void {
           console.log('componentDidUpdate')
       }
       // 移除前
       componentWillUnmount(): void {
           console.log('componentWillUnmount')
       }
       render(){
           console.log('render')
           
           let params={height:100, width:200, color:'green', fontSize:30};
           return (
               <Text>Hello World</Text>
           );
       }
    }
    
    // 构建样式
   const styles = StyleSheet.create({
       /*
       * *******    style属性    *******
       * flexDirection        水平：row   竖直：column
       * justifyContent       flex-start、center、flex-end、space-around、space-between以及space-evenly
       * alignItems           flex-start、center、flex-end、stretch。
       * */
   });