reactNative给webstorm创建代码模板
一、根据需要创建自己的代码模板
1 创建模板文件,操作如图:
模板创建步骤示例.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
选择模板.png填写新建文件信息,文件名,描述,作者,类名
示意图.png
四、最终效果
相关推荐
shyoushine 2020-07-26
LynnOhYeah 2020-07-04
chenjieit 2020-06-02
chenjieit 2020-05-30
小燕子 2020-05-04
一名java从业者 2020-04-23
88387716 2020-04-08
happywxp 2020-04-09
sfqbluesky 2020-02-18
gunhunti 2020-01-01
chenjieit 2019-12-27
chenjieit 2019-12-06
骷髅狗 2014-01-09