一、代码模板创建出来的文件效果
/**
* desc： 模板代码
* author：lawrence
* date： 2019/3/4 下午4:04
*/
import React, {Component} from 'react';
import PropTypes from "prop-types";
import {StyleSheet, View,} from 'react-native';
export default class CodeTemplate 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({});
二、根据需要创建自己的代码模板
- 打开
webstorm的设置，如图：
示例图.png -
创建模板文件，操作如图：
模板创建步骤示例.png - 步骤5模板内容示例代码，可根据自己需要修改
/**
* 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
选择模板.png -
填写新建文件信息，文件名，描述，作者，类名
示意图.png
四、最终效果
示例图.png
