reactNative给webstorm创建代码模板

一名java从业者 2020-02-20

一、根据需要创建自己的代码模板
  • 1 创建模板文件,操作如图:


    reactNative给webstorm创建代码模板
    模板创建步骤示例.png
     
  • 步骤2 模板内容示例代码,可根据自己需要修改
/**
  * desc:  $classDes
  * author:$author
  * date:  ${DATE} ${TIME}
  */
import React, {Component} from ‘react‘;
import PropTypes from "prop-types";
import {StyleSheet, View,} from ‘react-native‘;

export default class $className extends Component {

    static defaultProps = {};

    static propTypes = {};

    constructor(props) {
        super(props);
        this.state = {}
    }

    /**
     * 初始化了状态之后,在第一次绘制 render() 之前
     * (能够使用setState()来改变属性 有且只有一次)
     */
    componentWillMount() { }

    /**
     * 这个函数开始,就可以和 JS 其他框架交互了,例如设置计时 setTimeout 或者 setInterval,
     * 或者发起网络请求。这个函数也是只被调用一次
     * (能够使用setState()来改变属性 有且只有一次)
     */
    componentDidMount() { }

    /**
     * 输入参数 nextProps 是即将被设置的属性,旧的属性还是可以通过 this.props 来获取。在这个回调函数里面,你可以根据属性的变化,
     * 通过调用 this.setState() 来更新你的组件状态,这里调用更新状态是安全的,并不会触发额外的 render()
     * (能够使用setState()来改变属性 多次调用)
     */
    componentWillReceiveProps() { }

    /**
     * 当组件接收到新的属性和状态改变的话,都会触发调用 shouldComponentUpdate(...)
     * (不能够使用setState()来改变属性 多次调用)
     */
    shouldComponentUpdate() { }

    /**
     * 如果组件状态或者属性改变,并且上面的 shouldComponentUpdate(...) 返回为 true,就会开始准更新组件
     * (不能够使用setState()来改变属性 多次调用)
     */
    componentWillUpdate() { }

    /**
     * 调用了 render() 更新完成界面之后,会调用 componentDidUpdate() 来得到通知
     * (不能够使用setState()来改变属性 多次调用)
     */
    componentDidUpdate() { }

    /**
     * 组件要被从界面上移除的时候,就会调用 componentWillUnmount()
     * (不能够使用setState()来改变属性 有且只有一次调用)
     */
    componentWillUnmount() { }

    render() {
        return (
            <View>
                
            </View>
        );
    }
}

const styles = StyleSheet.create({});
  • 最后点击 应用 确定 保存模板
三、自定义模板使用
  • 文件 => NEW => ReactNative


     
    reactNative给webstorm创建代码模板
    选择模板.png
  • 填写新建文件信息,文件名,描述,作者,类名


     
    reactNative给webstorm创建代码模板
    示意图.png
四、最终效果
 
reactNative给webstorm创建代码模板

相关推荐

芒果先生Mango / 0评论 2017-04-28