前言
最近要開始寫一個新的項目害捕，算是將之前的項目做個總結(jié)鹰晨。把有缺陷的地方進(jìn)行修改墨叛，沒有引入的組件引入，算是做一個提煉總結(jié)模蜡，把之前沒有辦法修改的問題一一修正漠趁。
創(chuàng)建項目
我這里使用的是官方提供的react-native-cli即
react-native init newProject --version 0.57.0
新項目當(dāng)然是使用最新版本了，react-native從低版本向上升級真的是痛苦忍疾。
創(chuàng)建完新的項目之后當(dāng)然是建立目錄結(jié)構(gòu)闯传，目錄結(jié)構(gòu)確實是對項目有很大的影響÷倍剩總之結(jié)合之前的項目經(jīng)驗甥绿，構(gòu)建了如下的目錄結(jié)構(gòu)，當(dāng)然其他的也沒有問題则披，這里打算使用Mobx妹窖，所以將相關(guān)Mobx邏輯代碼直接命名了Mobx文件夾。
可以是很基礎(chǔ)的目錄結(jié)構(gòu)收叶，看文件夾名字就可以知道它的功能了骄呼。
在正式開始敲代碼前還需要做以下準(zhǔn)備工作。
eslint
eslint是airbnb公司推出的代碼規(guī)范插件判没，為編寫代碼提供標(biāo)準(zhǔn)
運行
(
export PKG=eslint-config-airbnb;
npm info "$PKG@latest" peerDependencies --json | command sed 's/[\{\},]//g ; s/: /@/g' | xargs npm install --save-dev "$PKG@latest"
)
還需要安裝babel-eslint
npm install babel-eslint --save-dev
創(chuàng)建.eslintrc文件蜓萄，可以將你需要的規(guī)則寫在這個文件當(dāng)中。
之后在package.json中的scripts中添加eslint執(zhí)行命令
"lint": "eslint --ext .js src/"
這個命令即為檢查src文件夾下所有的js文件澄峰，eslint的命令行參數(shù)有很多嫉沽，具體可以查看eslint配置
執(zhí)行npm run lint即可驗證該命令是否已經(jīng)正確配置，如果有任何不符合eslint的規(guī)范的地方會在命令行中提示俏竞。也可以在上述的.eslintrc文件中修改eslint內(nèi)置的規(guī)則绸硕，以符合具體的場景需求堂竟。
如果希望在src文件夾內(nèi)，有些文件跳過這些規(guī)則的檢查玻佩，可以在根目錄下創(chuàng)建.eslintignore文件出嘹，將路徑寫入其中，eslint就會自動跳過這些文件咬崔。
至此eslint的添加税稼、引用以及配置都已經(jīng)設(shè)置完畢，配合使用的編輯器中的插件會在日常輸入代碼的時候提示開發(fā)者符合eslint的規(guī)范垮斯。但是各個編譯器的插件功能不同郎仆，有時并不會很準(zhǔn)確的提示。所以在命令行中執(zhí)行eslint的命令才能的到真正的檢查結(jié)果兜蠕。
為了避免忘記執(zhí)行該命令扰肌，將不規(guī)范的代碼提交到遠(yuǎn)程倉庫，我們引入git的hook熊杨，它會在每次commit前調(diào)用配置中的命令曙旭，利用這個hook我們在每次提交前都執(zhí)行一次eslint命令確保每次提交代碼的規(guī)范性。
npm install pre-commit --save-dev
如果你不希望此次提交被檢查猴凹，可以使用-n來跳過hook
并在package.json中加入
"pre-commit":[
"eslint"
]
flow
flow是JavaScript 代碼的靜態(tài)類型檢查工具，它能夠捕獲 JavaScript 代碼中的常見問題岭皂，如靜態(tài)類型轉(zhuǎn)換不匹配郊霎、空指針引用等問題。同時爷绘，F(xiàn)low 還為 JavaScript 新增了類型語法书劝，如類型別名。
安裝
npm install --save-dev flow-bin
創(chuàng)建配置文件土至。
touch .flowconfig
先不管空白的.flowconfig配置文件购对。在package.json文件里flow腳本。
your project/package.json
"scripts": {
"flow": "flow; test $? -eq 0 -o $? -eq 2",
},
然后給需要flow檢查的文件里加上//@flow或者/*@flow*/陶因。然后就可以檢查了骡苞。（也可以在命令中加上--all， 這樣就會檢查所有文件）楷扬。
在根目錄下運行命令：
npm run flow
以上就配置好了flow解幽，下面寫一個簡單的小例子來說明flow是如何運行的。
const plus = (a: number, b: number) => {
return a + b;
}
plus(10, 2);
其實也就是和平常寫法沒什么區(qū)別烘苹，只是在定義參數(shù)的時候要添加該參數(shù)的數(shù)據(jù)類型躲株。如果傳入非法的數(shù)據(jù)類型，flow則會報錯镣衡。flow在多人開發(fā)中還是十分有效果的霜定，如果不想使用typescript档悠，那么js+flow也是不錯的選擇。flow當(dāng)然還有很多其他的用法望浩，這里就不一一介紹了辖所。
mobx
上一個項目中使用的就是mobx，總體來說使用起來十分簡單曾雕。對于App的流暢性也有很大的提升奴烙。
安裝
需要的依賴關(guān)系：mobx和mobx-react
npm i mobx mobx-react --save
我們還需要安裝一個babel插件，以便我們可以使用ES7裝飾器：
npm i babel-plugin-transform-decorators-legacy --save-dev
現(xiàn)在剖张，讓我們創(chuàng)建一個.babelrc文件來配置我們的插件：
{
"presets": ["react-native"],
// 主要這兩句話
"plugins": ["transform-decorators-legacy"]
}
自RN 0.56版本之后切诀，react-native默認(rèn)支持bable7，之前的寫法都不對了搔弄。
首先幅虑，需要安裝下面的4個babel庫
@babel/core @babel/plugin-proposal-decorators @babel/plugin-transform-runtime @babel/runtime將.babelrn修改為如下
{ "presets": ["module:metro-react-native-babel-preset"], "plugins": [ ["@babel/plugin-proposal-decorators", { "legacy": true }], ["@babel/transform-runtime", { "helpers": true, "regenerator": false }] ] }
react-navigation
react-navigation 3.x與之前版本有較大區(qū)別
安裝react-navigation
npm install react-navigation --save
在新版本中新增了一個原生庫react-native-gesture-handler如果沒有安裝，按如下方式安裝
npm install react-native-gesture-handler --save
react-native link react-native-gesture-handler
創(chuàng)建路由
之前使用的是StackNavigator來創(chuàng)建路由顾犹，在3.x中使用createStackNavigator并且需要由createAppContainer包裹起來
`react-navigation 1.x`
const Navigator = StackNavigator({
Home: {screen: Home}
},{
});
export default Navigator;
`react-navigation 3.x`
const Navigator = createStackNavigator({
Home: {screen: Home}
},{
});
export default createAppContainer(Navigator);
以上倒庵，同理TabNavigator修改為createBottomTabNavigator
總之react-navigation 3.x與之前版本有較大出入，更多詳情請看react-navigation官網(wǎng)
Axios
react-native中自帶了fetch請求API炫刷，由于fetch中有很多功能不好實現(xiàn)擎宝，就選擇axios做為網(wǎng)絡(luò)請求庫。axios起碼可以設(shè)置請求超時時間浑玛，fetch的話只能使用promise.race()間接實現(xiàn)請求超時的功能绍申。
安裝
npm install axios
使用
axios和fetch在使用起來沒有什么差別
`get請求`
axios.get('/user', {
params: {
ID: 12345
}
})
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
`post請求`
axios.post('/user', {
firstName: 'Fred',
lastName: 'Flintstone'
})
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
當(dāng)然axios還有很多配置選項，比如請求超時時間顾彰、設(shè)置請求頭极阅、配置代理、配置相應(yīng)頭等等涨享，這些都可以在axios中文文檔中查看
總結(jié)
新建一個項目需要多方面的考慮筋搏，這里只是寫出我習(xí)慣用到的一些框架。后續(xù)肯定還有別的需求添加厕隧，但是大體上都是一些UI方面的功能性的東西奔脐，總體的項目框架已經(jīng)搭建好了。這個也算是之前項目的一個總結(jié)吧吁讨。
以上
