VSCode 配置React Native開發(fā)環(huán)境的方法
本文介紹了VSCode 配置React Native開發(fā)環(huán)境的方法,分享給大家,具體如下:
1.安裝VSCode
2.安裝插件
按F1 并輸入 ext install 并回車, 或者使用
輸入react-native安裝React Native Tools
假定你已經(jīng)在設(shè)備上安裝了react native,
如果沒有安裝,請(qǐng)使用npm install -g react-native-cli安裝
或者按照官方文檔操作
新建一個(gè)RN工程 并使用VSCode打開
安裝完成后 按F1可以看到命令里多了很多關(guān)于React Native的選項(xiàng)

React Native Command
3.配置調(diào)試環(huán)境
a.自動(dòng)配置
鍵入shift+cmd+D或者點(diǎn)擊icon

shift+cmd+D
再點(diǎn)擊

設(shè)置
選擇 React Native:

會(huì)自動(dòng)生成launch.json文件,里面4個(gè)配置選項(xiàng)Debug Android、Debug iOS、Debug iOS、Debug iOS
{
"version": "0.2.0",
"configurations": [
{
"name": "Debug Android",
"program": "${workspaceRoot}/.vscode/launchReactNative.js",
"type": "reactnative",
"request": "launch",
"platform": "android",
"sourceMaps": true,
"outDir": "${workspaceRoot}/.vscode/.react"
},
{
"name": "Debug iOS",
"program": "${workspaceRoot}/.vscode/launchReactNative.js",
"type": "reactnative",
"request": "launch",
"platform": "ios",
"target": "iPhone 5s",
"sourceMaps": true,
"outDir": "${workspaceRoot}/.vscode/.react"
},
{
"name": "Attach to packager",
"program": "${workspaceRoot}/.vscode/launchReactNative.js",
"type": "reactnative",
"request": "attach",
"sourceMaps": true,
"outDir": "${workspaceRoot}/.vscode/.react"
},
{
"name": "Debug in Exponent",
"program": "${workspaceRoot}/.vscode/launchReactNative.js",
"type": "reactnative",
"request": "launch",
"platform": "exponent",
"sourceMaps": true,
"outDir": "${workspaceRoot}/.vscode/.react"
}
]
}
b. 手動(dòng)配置
接下來 我們清空 configurations

點(diǎn)擊添加配置按鈕,并選擇configuration

添加配置
結(jié)果如下:
{
"version": "0.2.0",
"configurations": [
]
}
在此點(diǎn)擊添加配置按鈕,選擇React Native: Debug iOS

配置選項(xiàng)
這樣 運(yùn)行iOS就配置好了
{
"version": "0.2.0",
"configurations": [
{
"name": "Debug iOS",
"program": "${workspaceRoot}/.vscode/launchReactNative.js",
"type": "reactnative",
"request": "launch",
"platform": "ios",
"sourceMaps": true,
"target": "iPhone 6s",
"outDir": "${workspaceRoot}/.vscode/.react"
}
]
}
點(diǎn)擊設(shè)置左邊的選項(xiàng),會(huì)有Debug iOS選項(xiàng)

Debug iOS
接下來 就可以點(diǎn)擊上面選項(xiàng)的運(yùn)行按鈕,成功運(yùn)行iOS啦

Hello world
4.其它實(shí)用插件
- Auto Close Tag
- Auto Complete Tag
- AutoFileName
- Auto Rename Tag
- Auto Import
- Path Intellisense
- Color Highlight
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
react 通過后端接口實(shí)現(xiàn)路由授權(quán)的示例代碼
本文主要介紹了React應(yīng)用中通過后端接口獲取路由授權(quán),實(shí)現(xiàn)動(dòng)態(tài)和靈活的權(quán)限管理,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2024-11-11
ReactNative頁面跳轉(zhuǎn)Navigator實(shí)現(xiàn)的示例代碼
本篇文章主要介紹了ReactNative頁面跳轉(zhuǎn)Navigator實(shí)現(xiàn)的示例代碼,具有一定的參考價(jià)值,有興趣的可以了解一下2017-08-08
聊聊jenkins部署vue/react項(xiàng)目的問題
本文給大家介紹了jenkins部署vue/react項(xiàng)目的問題,文末給大家提到了centOS安裝jenkins的腳本,本文給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧2022-02-02
React實(shí)現(xiàn)生成和導(dǎo)出Word文檔的方法詳解
React是一個(gè)流行的JavaScript庫,用于構(gòu)建現(xiàn)代前端應(yīng)用程序,本文將深入探討如何在React中生成和導(dǎo)出Word文檔,感興趣的小伙伴可以學(xué)習(xí)一下2023-09-09
React Router中Link和NavLink的學(xué)習(xí)心得總結(jié)
這篇文章主要介紹了React Router中Link和NavLink的學(xué)習(xí)心得總結(jié),具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-12-12
react中關(guān)于Context/Provider/Consumer傳參的使用
這篇文章主要介紹了react中關(guān)于Context/Provider/Consumer傳參的使用,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-09-09
React?antd中setFieldsValu的簡(jiǎn)便使用示例代碼
form.setFieldsValue是antd?Form組件中的一個(gè)方法,用于動(dòng)態(tài)設(shè)置表單字段的值,它接受一個(gè)對(duì)象作為參數(shù),對(duì)象的鍵是表單字段的名稱,值是要設(shè)置的字段值,這篇文章主要介紹了React?antd中setFieldsValu的簡(jiǎn)便使用,需要的朋友可以參考下2023-08-08

