reactNative给webstorm创建代码模板

一、根据需要创建自己的代码模板

• 1 创建模板文件，操作如图：

  
  
  

  模板创建步骤示例.png

   
• 步骤2 模板内容示例代码，可根据自己需要修改

       

/**
* desc： $desc
* 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 = {}
}

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

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

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

render() {
return (
<View>

</View>
);
}
}

// 样式表
const styles = StyleSheet.create({});

 

• 最后点击 应用 确定 保存模板

三、自定义模板使用

• 文件 => NEW => ReactNative

  
  
   

  

  选择模板.png

• 填写新建文件信息，文件名，描述，作者，类名

  
  
   

  

  示意图.png

四、最终效果