001-React-Native-Template

在React-Native平常開發中，新建文件或者組件是最經常使用的操做,而且,組件內部的一些方法(頁面跳轉,組件監聽等)也是重複來寫。 但是，在咱們新建不一樣的文件或者組件時，一些代碼固定不變，此時，須要從新寫一遍就費事費力了，而最經常使用的操做就是複製，粘貼，修改，重複而無趣。如果不想重複如此無聊的機械動做，又想快速高效的來完成任務，編寫代碼，那怎麼辦呢？此時，解決方案出現了。--File and Code Templates

使用此配置，可減省重複無用的勞動力，真正提高效率。 若是你以爲有用，請點個贊，或者分享給其餘朋友。

一：配置有兩種方式(以mac配置爲例)：

一： 1-：選擇Preferences;

2-：搜索框輸入Templates;

3-：點擊File and Code Templates

4-：選中JavaScript File

5-：刪除裏面的代碼，把如下代碼複製進去(此代碼能夠自定義,包括引入組件,方法,樣式文件等)：

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-：點擊Apply 示例圖以下：

二：

1-： 選擇Preferences;

2-：搜索框輸入Templates;

3-：點擊File and Code Templates

4-：點擊左上角「+」號按鈕

示例圖以下：

注意點：

1-：注意新建文件的名字，本例子中取名爲:React-Native;

2-：注意Extension的輸入框填寫爲js;

四：使用方式：

分爲兩種，與上面配置方式一一對應：

一： 1-：點擊New ，選擇Java Script File；

2-：輸入新建文件的名字，並點擊OK；

3-：查看新建文件內容爲填寫的模版內容

二：

1-：點擊New ，選擇React-Native文件類型(與使用第二中配置方式時新建的名字一一對應)；

2-：輸入新建文件的名字，並點擊OK；

3-：查看新建文件內容爲填寫的模版內容

使用效果截圖：

四:封裝一些方法/組件使用模版快速生成

1-： 選擇Preferences;

2-：搜索框輸入Templates;

3-：點擊Live Templates;

4-：點擊左上角「+」號按鈕

依據下面視頻,分別填寫相關代碼:

1-:this.props.navigation.navigate("");

2:<TouchableOpacity 
    style={styles.}
    onPress={()=>{
    
}}>
    
</TouchableOpacity>


3-:{this.data..map=(item,index)=>{
                    return(
                        <View>
                        
                        </View>
                    )
=}}
複製代碼

使用:

以上,可根據自身業務進行相關調整和修改!!!!!

使用此配置，可減省重複無用的勞動力，真正提高效率。

若須要添加組件或代碼,請下方留言,等後期添加完成能夠下載。

同時,也提供了一份導出文件,可下載後直接導入使用: github.com/erhutime/Re…