在React-Native日常開(kāi)發(fā)中厢蒜，新建文件或者組件是最常用的操作,并且,組件內(nèi)部的一些方法(頁(yè)面跳轉(zhuǎn),組件監(jiān)聽(tīng)等)也是重復(fù)來(lái)寫(xiě)轻纪。
可是齿梁，在我們新建不同的文件或者組件時(shí)催植，一些代碼固定不變肮蛹，此時(shí)，需要重新寫(xiě)一遍就費(fèi)事費(fèi)力了创南，而最常用的操作就是復(fù)制伦忠，粘貼，修改扰藕，重復(fù)而無(wú)趣缓苛。若是不想重復(fù)如此無(wú)聊的機(jī)械動(dòng)作，又想快速高效的來(lái)完成任務(wù)邓深，編寫(xiě)代碼，那怎么辦呢笔刹？此時(shí)芥备，解決方案出現(xiàn)了。--File and Code Templates
使用此配置舌菜，可減省重復(fù)無(wú)用的勞動(dòng)力萌壳，真正提升效率。
如果你覺(jué)得有用日月，請(qǐng)點(diǎn)個(gè)贊袱瓮，或者分享給其他朋友。
一：配置有兩種方式(以mac配置為例)：
一：
1-： 選擇Preferences;
2-：搜索框輸入Templates;
3-：點(diǎn)擊File and Code Templates
4-：選中JavaScript File
5-：刪除里面的代碼爱咬，把以下代碼復(fù)制進(jìn)去(此代碼可以自定義,包括引入組件,方法,樣式文件等)：
import React, { Component } from 'react';
import {
StyleSheet,
Text,
View,
Image,
} from 'react-native';
export default class ${NAME} extends Component {
render() {
return (
<View style={styles.container}>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
},
});
6-：點(diǎn)擊Apply
示例圖如下：
二：
1-： 選擇Preferences;
2-：搜索框輸入Templates;
3-：點(diǎn)擊File and Code Templates
4-：點(diǎn)擊左上角“+”號(hào)按鈕
示例圖如下：
注意點(diǎn)：
1-：注意新建文件的名字尺借，本例子中取名為:React-Native;
2-：注意Extension的輸入框填寫(xiě)為js;
四：使用方式：
分為兩種，與上面配置方式一一對(duì)應(yīng)：
一：
1-：點(diǎn)擊New 精拟，選擇Java Script File燎斩；
2-：輸入新建文件的名字，并點(diǎn)擊OK蜂绎；
3-：查看新建文件內(nèi)容為填寫(xiě)的模版內(nèi)容
二：
1-：點(diǎn)擊New 栅表，選擇React-Native文件類(lèi)型(與使用第二中配置方式時(shí)新建的名字一一對(duì)應(yīng))；
2-：輸入新建文件的名字师枣，并點(diǎn)擊OK怪瓶；
3-：查看新建文件內(nèi)容為填寫(xiě)的模版內(nèi)容
使用效果截圖：
四:封裝一些方法/組件使用模版快速生成
1-： 選擇Preferences;
2-：搜索框輸入Templates;
3-：點(diǎn)擊Live Templates;
4-：點(diǎn)擊左上角“+”號(hào)按鈕
依據(jù)下面視頻,分別填寫(xiě)相關(guān)代碼:
1-:this.props.navigation.navigate("");
2:<TouchableOpacity
style={styles.}
onPress={()=>{
}}>
</TouchableOpacity>
3-:{this.data..map=(item,index)=>{
return(
<View>
</View>
)
=}}
使用:
以上,可根據(jù)自身業(yè)務(wù)進(jìn)行相關(guān)調(diào)整和修改!!!!!
使用此配置，可減省重復(fù)無(wú)用的勞動(dòng)力践美，真正提升效率洗贰。
若需要添加組件或代碼,請(qǐng)下方留言,等后期添加完成可以下載。
同時(shí),也提供了一份導(dǎo)出文件,可下載后導(dǎo)入使用:
https://github.com/erhutime/React-Native-Template
另外,打一波廣告:軟著申請(qǐng)可以找我,加QQ:820513523,有大幅度優(yōu)惠和折扣!
