讲师中心 微信公众号
AI工具推荐 视频效率加速

VSCode移动端开发:Flutter与React Native环境配置

云雪君_5872

云雪君_5872

发布时间:2025-12-18 20:23:22

|

1038人浏览过

|

来源于php中文网

原创

需通过code-server在iPad上配置远程开发环境:安装Dart Code与React Native Tools插件;在远程Linux服务器配置Flutter SDK路径并运行flutter doctor -v验证;安装JDK 17、Android SDK及NDK,配置ANDROID_HOME;通过SSH隧道连接Mac主机启用iOS模拟器远程调试。

vscode移动端开发:flutter与react native环境配置

如果您希望在移动设备上进行Flutter或React Native应用开发,但VSCode未正确识别SDK路径或无法启动调试会话,则可能是由于开发环境未按移动端特定要求配置。以下是完成该配置的具体步骤:

本文运行环境:iPad Pro,iPadOS 17

一、安装支持移动端开发的VSCode远程工具

iPadOS原生不支持直接运行完整版VSCode桌面应用,需借助支持Web端VSCode的远程开发方案,通过浏览器访问本地或云服务器上的VSCode实例,并确保其具备Flutter与React Native所需插件及CLI依赖。

1、在Safari中访问code-server官方镜像站点或自建code-server服务地址。

2、输入预设登录密码完成身份验证,进入Web版VSCode界面。

3、点击左侧扩展图标,在搜索框中依次输入并安装Dart Code与React Native Tools插件。

4、确认插件状态栏显示“已启用”,且无红色警告图标。

二、配置Flutter SDK路径(基于远程Linux服务器)

Flutter命令行工具必须在远程服务器上完成安装与PATH注册,Web版VSCode通过SSH连接调用该环境,因此需确保flutter doctor可执行并识别iOS/Android工具链。

1、在远程服务器终端中运行curl -O https://storage.googleapis.com/flutter_infra_release/releases/stable/linux/flutter_linux_3.19.5-stable.tar.xz下载最新稳定版SDK压缩包。

2、执行tar xf flutter_linux_3.19.5-stable.tar.xz -C $HOME解压至用户主目录。

3、将$HOME/flutter/bin添加至服务器shell配置文件(如~/.bashrc)的PATH变量末尾。

React Wrap
React Wrap

React UI?—— JavaScript?

下载

4、运行source ~/.bashrc && flutter doctor -v验证Flutter基础环境是否就绪。

三、配置React Native CLI依赖(Android平台专用)

React Native Android开发依赖Java JDK、Android SDK及NDK组件,Web版VSCode需通过远程终端调用这些工具,因此必须在服务器端完成全量安装与环境变量绑定。

1、在远程服务器中执行sudo apt update && sudo apt install openjdk-17-jdk安装JDK 17。

2、使用sdkmanager命令下载Android SDK Platform-Tools与Build-Tools 34.0.0:sdkmanager "platform-tools" "build-tools;34.0.0"。

3、设置ANDROID_HOME环境变量为/opt/android-sdk,并在~/.bashrc中导出该变量及$ANDROID_HOME/platform-tools至PATH。

4、运行adb version与npx react-native doctor确认Android调试桥与RN检查器响应正常。

四、启用iOS模拟器远程调试支持

iPadOS无法直接运行Xcode或iOS模拟器,但可通过远程Mac服务器桥接实现调试能力;Web版VSCode需配置SSH隧道并指向已启用Remote Debugging的macOS主机。

1、在Mac主机上启用远程登录(系统设置→通用→远程登录),记录其局域网IP地址与SSH端口。

2、在code-server扩展设置中,配置React Native: Packager Host为Mac主机IP,端口设为8081。

3、在Mac终端中执行npx react-native run-ios --simulator="iPhone 15"启动模拟器并加载Bundle。

4、在iPad Safari中打开http://[Mac-IP]:8081/debugger-ui,确认Chrome DevTools界面可加载并连接到JS上下文。

热门AI工具

更多
UP简历
UP简历 Hot

一款AI办公效率工具,主要用于基于AI技术的免费在线简历制作工具,适合需要提升相关任务效率的用户。

VibeKnow
VibeKnow Hot

一款AI视频创作工具,主要用于全球首个AI知识视频创作平台,文档、文章、网页,一键生成视频,适合需要提升相关任务效率的用户。

豆包大模型

豆包大模型是一款由字节跳动推出的企业级大语言模型服务平台。

创客贴AI

创客贴AI是一款AI图像与设计工具,AI辅助的智能在线设计工具。

DeepSeek

DeepSeek是一款面向对话、写作、编程和推理场景的AI大模型工具。

AionClaw
AionClaw Hot

AionClaw是一款面向办公、创作和编程任务的AI桌面智能体。

WorkBuddy

一款AI办公效率工具,主要用于腾讯云推出的AI原生桌面智能体工作台,适合需要提升相关任务效率的用户。

讯飞绘文

讯飞绘文是一款由科大讯飞推出的一站式 AIGC 内容运营平台。

讯飞智作

讯飞智作是一款AI视频创作工具,AI文本配音工具,数字人课程、营销视频制作。

相关专题

更多
chrome什么意思
chrome什么意思

chrome是浏览器的意思,由Google开发的网络浏览器,它在2008年首次发布,并迅速成为全球最受欢迎的浏览器之一。本专题为大家提供chrome相关的文章、下载、课程内容,供大家免费下载体验。

2846

2023.08.11

chrome无法加载插件怎么办
chrome无法加载插件怎么办

chrome无法加载插件可以通过检查插件是否已正确安装、禁用和启用插件、清除插件缓存、更新浏览器和插件、检查网络连接和尝试在隐身模式下加载插件方法解决。更多关于chrome相关问题,详情请看本专题下面的文章。php中文网欢迎大家前来学习。

5699

2023.11.06

Chrome开启无痕模式
Chrome开启无痕模式

本专题整合了Chrome无痕模式开启相关内容,阅读专题下面的文章了解更多详细教程。

4047

2026.03.24

curl_exec
curl_exec

curl_exec函数是PHP cURL函数列表中的一种,它的功能是执行一个cURL会话。给大家总结了一下php curl_exec函数的一些用法实例,这个函数应该在初始化一个cURL会话并且全部的选项都被设置后被调用。他的返回值成功时返回TRUE, 或者在失败时返回FALSE。

3763

2023.06.14

linux常见下载安装工具
linux常见下载安装工具

linux常见下载安装工具有APT、YUM、DNF、Snapcraft、Flatpak、AppImage、Wget、Curl等。想了解更多linux常见下载安装工具相关内容,可以阅读本专题下面的文章。

875

2023.10.30

js正则表达式
js正则表达式

php中文网为大家提供各种js正则表达式语法大全以及各种js正则表达式使用的方法,还有更多js正则表达式的相关文章、相关下载、相关课程,供大家免费下载体验。

4616

2023.06.20

js获取当前时间
js获取当前时间

JS全称JavaScript,是一种具有函数优先的轻量级,解释型或即时编译型的编程语言;它是一种属于网络的高级脚本语言,主要用于Web,常用来为网页添加各式各样的动态功能。js怎么获取当前时间呢?php中文网给大家带来了相关的教程以及文章,欢迎大家前来学习阅读。

1395

2023.07.28

js 字符串转数组
js 字符串转数组

js字符串转数组的方法:1、使用“split()”方法;2、使用“Array.from()”方法;3、使用for循环遍历;4、使用“Array.split()”方法。本专题为大家提供js字符串转数组的相关的文章、下载、课程内容,供大家免费下载体验。

1818

2023.08.03

Vite 项目如何打包和部署
Vite 项目如何打包和部署

Vite项目打包部署专题汇集生产构建、产物预览、输出目录、资源路径、Nginx与GitHub Pages部署及常见白屏和路由404问题的已审核文章,帮助读者完成上线流程。

60

2026.10.28

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
Python uv官方安装与入门文档
Python uv官方安装与入门文档

共0课时 | 0人学习

Buffalo框架快速入门指南
Buffalo框架快速入门指南

共0课时 | 0人学习

Valgrind支持平台说明
Valgrind支持平台说明

共0课时 | 0人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn