前言
最近要開始寫一個(gè)新的項(xiàng)目，算是將之前的項(xiàng)目做個(gè)總結(jié)。把有缺陷的地方進(jìn)行修改，沒有引入的組件引入，算是做一個(gè)提煉總結(jié)，把之前沒有辦法修改的問題一一修正。
創(chuàng)建項(xiàng)目
我這里使用的是官方提供的react-native-cli即
react-native init newProject --version 0.57.0
新項(xiàng)目當(dāng)然是使用最新版本了，react-native從低版本向上升級(jí)真的是痛苦。
創(chuàng)建完新的項(xiàng)目之后當(dāng)然是建立目錄結(jié)構(gòu)，目錄結(jié)構(gòu)確實(shí)是對(duì)項(xiàng)目有很大的影響?？傊Y(jié)合之前的項(xiàng)目經(jīng)驗(yàn)，構(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)
運(yù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ī)則寫在這個(gè)文件當(dāng)中。
之后在package.json中的scripts中添加eslint執(zhí)行命令
"lint": "eslint --ext .js src/"
這個(gè)命令即為檢查src文件夾下所有的js文件，eslint的命令行參數(shù)有很多，具體可以查看eslint配置
執(zhí)行npm run lint即可驗(yàn)證該命令是否已經(jīng)正確配置，如果有任何不符合eslint的規(guī)范的地方會(huì)在命令行中提示。也可以在上述的.eslintrc文件中修改eslint內(nèi)置的規(guī)則，以符合具體的場(chǎng)景需求。
如果希望在src文件夾內(nèi)，有些文件跳過這些規(guī)則的檢查，可以在根目錄下創(chuàng)建.eslintignore文件，將路徑寫入其中，eslint就會(huì)自動(dòng)跳過這些文件。
至此eslint的添加、引用以及配置都已經(jīng)設(shè)置完畢，配合使用的編輯器中的插件會(huì)在日常輸入代碼的時(shí)候提示開發(fā)者符合eslint的規(guī)范。但是各個(gè)編譯器的插件功能不同，有時(shí)并不會(huì)很準(zhǔn)確的提示。所以在命令行中執(zhí)行eslint的命令才能的到真正的檢查結(jié)果。
為了避免忘記執(zhí)行該命令，將不規(guī)范的代碼提交到遠(yuǎn)程倉(cāng)庫，我們引入git的hook，它會(huì)在每次commit前調(diào)用配置中的命令，利用這個(gè)hook我們?cè)诿看翁峤磺岸紙?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)換不匹配、空指針引用等問題。同時(shí)，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， 這樣就會(huì)檢查所有文件）。
在根目錄下運(yùn)行命令：
npm run flow
以上就配置好了flow，下面寫一個(gè)簡(jiǎn)單的小例子來說明flow是如何運(yùn)行的。
const plus = (a: number, b: number) => {
return a + b;
}
plus(10, 2);
其實(shí)也就是和平常寫法沒什么區(qū)別，只是在定義參數(shù)的時(shí)候要添加該參數(shù)的數(shù)據(jù)類型。如果傳入非法的數(shù)據(jù)類型，flow則會(huì)報(bào)錯(cuò)。flow在多人開發(fā)中還是十分有效果的，如果不想使用typescript，那么js+flow也是不錯(cuò)的選擇。flow當(dāng)然還有很多其他的用法，這里就不一一介紹了。
mobx
上一個(gè)項(xiàng)目中使用的就是mobx，總體來說使用起來十分簡(jiǎn)單。對(duì)于App的流暢性也有很大的提升。
安裝
需要的依賴關(guān)系：mobx和mobx-react
npm i mobx mobx-react --save
我們還需要安裝一個(gè)babel插件，以便我們可以使用ES7裝飾器：
npm i babel-plugin-transform-decorators-legacy --save-dev
現(xiàn)在，讓我們創(chuàng)建一個(gè).babelrc文件來配置我們的插件：
{
"presets": ["react-native"],
// 主要這兩句話
"plugins": ["transform-decorators-legacy"]
}
自RN 0.56版本之后，react-native默認(rèn)支持bable7，之前的寫法都不對(duì)了。
首先，需要安裝下面的4個(gè)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
在新版本中新增了一個(gè)原生庫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與之前版本有較大出入，更多詳情請(qǐng)看react-navigation官網(wǎng)
Axios
react-native中自帶了fetch請(qǐng)求API，由于fetch中有很多功能不好實(shí)現(xiàn)，就選擇axios做為網(wǎng)絡(luò)請(qǐng)求庫。axios起碼可以設(shè)置請(qǐng)求超時(shí)時(shí)間，fetch的話只能使用promise.race()間接實(shí)現(xiàn)請(qǐng)求超時(shí)的功能。
安裝
npm install axios
使用
axios和fetch在使用起來沒有什么差別
`get請(qǐng)求`
axios.get('/user', {
params: {
ID: 12345
}
})
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
`post請(qǐng)求`
axios.post('/user', {
firstName: 'Fred',
lastName: 'Flintstone'
})
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
當(dāng)然axios還有很多配置選項(xiàng)，比如請(qǐng)求超時(shí)時(shí)間、設(shè)置請(qǐng)求頭、配置代理、配置相應(yīng)頭等等，這些都可以在axios中文文檔中查看
總結(jié)
新建一個(gè)項(xiàng)目需要多方面的考慮，這里只是寫出我習(xí)慣用到的一些框架。后續(xù)肯定還有別的需求添加，但是大體上都是一些UI方面的功能性的東西，總體的項(xiàng)目框架已經(jīng)搭建好了。這個(gè)也算是之前項(xiàng)目的一個(gè)總結(jié)吧。
以上
