Expo
這邊文章已經(jīng)過(guò)時(shí)了雳灾,如果您想在expo中使用ts請(qǐng)到這里https://github.com/janaagaard75/expo-and-typescript來(lái)參考如何使用嫉父。
當(dāng)我們讀react native文檔時(shí)發(fā)現(xiàn)了一個(gè)叫Expo的工具呐萨,這個(gè)工具可以很好的使我們快速的開(kāi)發(fā)react native應(yīng)用搀军,里面的服務(wù)以及api都可以讓使得我們開(kāi)發(fā)得到質(zhì)的飛越帘撰。通知政钟,OTA, 發(fā)布蜈敢,原生的一些工能都應(yīng)有盡有雕凹。從調(diào)試到發(fā)布以及線(xiàn)上的熱修復(fù)殴俱,expo都能為你提供這些服務(wù)。
配合使用TypeScript
TypeScript可以使我們?cè)诰帉?xiě)js的時(shí)候像使用其他一些靜態(tài)類(lèi)型語(yǔ)言一樣枚抵,能讓我編寫(xiě)出更加安全的代碼线欲,不僅如此我們還可以配合vscode,讓你像使用ide一樣去編寫(xiě)代碼汽摹。在expo中你可能也想使用TypeScript李丰,我在官網(wǎng)以及網(wǎng)上都沒(méi)找到相關(guān)的資料。后來(lái)摸索中發(fā)現(xiàn)可以在app.json中添加下面的代碼就可以使用了TypeScript
"packagerOpts": {
"assetExts": [
"ttf",
"mp4"
],
"sourceExts": [
"ts",
"tsx"
],
"transformer": "node_modules/react-native-typescript-transformer/index.js"
}
這里只是告訴expo一些文件的類(lèi)型以及轉(zhuǎn)換工具逼泣,就像babel的配置那樣趴泌。當(dāng)然你要看下你的node_modules中是否有這個(gè)轉(zhuǎn)換器react-native-typescript-transformer沒(méi)有的話(huà)你就要執(zhí)行npm install react-native-typescript-transformer --save-dev了。然后你就可以想網(wǎng)上說(shuō)的去配置你的typescript的開(kāi)發(fā)環(huán)境了拉庶。比如如何使用@types去增強(qiáng)你的代碼提示嗜憔,如何使用tslint去增加你的代碼的風(fēng)格檢查,這一切都變得相對(duì)簡(jiǎn)單了氏仗。
配合vscode進(jìn)行斷點(diǎn)調(diào)試
如果你不喜歡使用chrome調(diào)試你的代碼吉捶,當(dāng)然那不是一個(gè)最好的選擇,想想一下你可以在vscode里打斷點(diǎn)調(diào)試你的代碼皆尔,這是多么爽的體驗(yàn)呐舔。首先你應(yīng)該打開(kāi)你的調(diào)試配置然后加入下面的代碼
{
// 使用 IntelliSense 了解相關(guān)屬性。
// 懸停以查看現(xiàn)有屬性的描述慷蠕。
// 欲了解更多信息珊拼,請(qǐng)?jiān)L問(wèn): https://go.microsoft.com/fwlink/?linkid=830387
"version": "0.2.0",
"configurations": [
{
"name": "Debug in Exponent",
"program": "${workspaceRoot}/.vscode/launchReactNative.js",
"type": "reactnative",
"request": "launch",
"platform": "exponent",
"sourceMaps": true,
"outDir": "${workspaceRoot}/.vscode/.react"
}
]
}
當(dāng)然上面的代碼應(yīng)該是在你的.vscode配置里,如果你對(duì)使用vscode調(diào)試不太熟悉流炕,你可以去vscode官網(wǎng)查看詳細(xì)教程杆麸。
總結(jié)
如果你對(duì)我上面說(shuō)的不太理解,那你應(yīng)該第一步去expo官網(wǎng)查看一些教程搁进,并且使用expo創(chuàng)建一個(gè)項(xiàng)目讓它跑起來(lái),第二步你應(yīng)該了解TypeScript以及如何配置它昔头,第三步你應(yīng)該去vscode官網(wǎng)了解如何調(diào)試的一些問(wèn)題饼问。如果你還是不明白這些東西。你應(yīng)該去github上找到這些項(xiàng)目然后去issues里去查找你的問(wèn)題揭斧,這是一個(gè)解決問(wèn)題比較好的方案莱革。好了,接下來(lái)你就可以愉快的編碼了讹开。盅视。。