1、安装Node和VSCode 首先我们来搞一下Hello World前的准备工作，使用RN时，Node环境是必不可少的，如果你没有Node环境可以使用brew进行安装。...虽然本篇博客使用的VScode，但是平时开发中用WebStorm感觉还是挺爽的。 2、安装 exp 直接在模拟器上调试，依赖于exp这个App，下方这个命令就是安装exp。...三、自定义组件（Componet）、Props以及State 实现完HelloWorld后我们来看一下RN中组件封装的姿势，下方会封装一个HelloWorld的组件，然后在该组件的基础上看一下RN中Props...接下来我们将要介绍如何给自定义的组件添加特定的属性。 ?...声明State类型：首先我们像声明之前的Props类型一样声明了一个HelloWorldStateType的状态类型，然后HelloWorld组件中状态类型的位置设置了该类型。
VSCode 主题设置推荐，自定义配色方案，修改注释高亮颜色 设置主题： 个人比较忠爱vscode的界面，感觉比pycharm要更美观点，虽然两个都装了，但还是会习惯性打开vscode进行调试。...或者在设置--外观里面进行细致设置 vscode官网：Themes Extensions - Visual Studio Marketplace，大家可以选择自己喜欢的主题 主题推荐 One Dark...Panda Theme Panda Theme - Visual Studio Marketplace Version Last Updated 1.3.0 2018/6/30 自定义配色方案...自定义配色方案_weixin_30755393的博客-CSDN博客 具体文件内容我就不贴了，改改颜色和高亮很简单的。...可以根据自己的喜好进行调整 修改注释高亮颜色 下面我们将进行选择时显示高亮和注释颜色修改，首先打开settings.json文件 选择高亮： 在setting.json中添加如下字段即可，颜色可以自定义修改
图片 编辑工具笔者用的 vscode，官方也是推荐 vscode。...需要先下载 Flutter 的 SDK：https://docs.flutter.dev/development/tools/sdk/releases 解压缩 SDK 后设置对应的 SDK 环境变量地址...首先笔者都是用的 vscode 进行开发的，需要安装官方推荐的 vscode 插件，直接在插件市场搜索 Flutter 安装就可以了，之后就可以通过插件新建 Flutter 新项目了。...本地配置好对应的 iOS 模拟器，在 vscode 左边点击调试按钮选择对应的模拟器，就可以直接进行开发调试了。...下载后打开，熟悉 vscode 的同学应该能发现，这是一个基于 vscode 二次开发的 IDE。
编辑工具笔者用的 vscode，官方也是推荐 vscode。...需要先下载 Flutter 的 SDK：https://docs.flutter.dev/development/tools/sdk/releases 解压缩 SDK 后设置对应的 SDK 环境变量地址...首先笔者都是用的 vscode 进行开发的，需要安装官方推荐的 vscode 插件，直接在插件市场搜索 Flutter 安装就可以了，之后就可以通过插件新建 Flutter 新项目了。...本地配置好对应的 iOS 模拟器，在 vscode 左边点击调试按钮选择对应的模拟器，就可以直接进行开发调试了。...下载后打开，熟悉 vscode 的同学应该能发现，这是一个基于 vscode 二次开发的 IDE。
原先一直都是在做iOS的原生开发，Android也是兴趣平平，曾经也是很想学习下RN的，无奈web前端跟js的一些相关内容实在不熟悉，直到这次的flutter的出现 让我重新有股学习的冲动。...image 安装VSCode 考虑到对Android studio 不是很熟悉，所以这次选择了 vscode 直接在官网下载vscode ?...image 手动导入下 （我是安装在 ~目录下直接选择flutter目录就可以） 输入新建的工程名,选择存放路径 这时候就会自动生成相关工程文件 这是模板工程，选择模拟器就能直接跑了 先打开模拟器 open...-a Simulator 这是最下角就可以选择刚刚打开的模拟器 ?...image 模拟器就跑起来了，效果还不错~ ?
当然，你也可以创建一个空白RN项目，从零开始开发，体验原汁原味的ReactNative开发。 ? 普元微应用与ReactNative原生应用不同，它将开发与打包分离开来。...微应用的开发环境只关心RN开发，而把原生部分分离在项目之外，所以该目录结构对于只做RN开发的人来说会更加合理和便捷。微应用的代码部分在src下，配置文件在config下，打包产物在output下。...你可以通过扫码下载最新的调试客户端，目前我们支持调试客户端和调试服务在同网段的代码调试（Android可以通过adb端口转发实现无网络调试），同时Android和iOS也都支持模拟器安装调试，为部分企业的内网调试提供支持...平台提供了丰富的打包参数，并提供可视化页面，可以配置应用首页、版本号、欢迎页、App服务地址等，同时iOS支持打包app-store、enterprise、ad-hoc三种模式，并支持模拟器、安全通道、...推荐阅读 从启动过程讲述普元Mobile 8.0基座 从Mobile8.0平台与微应用剖析RN组件生命周期 快改！你这些资料又被卖了 ?
调试配置后（配置使用react native调试） yarn 安装包（npm会有些问题） rn 的android添加local.properties内容如下，指定android sdk存放位置...提示已经建立调试连接错误），浏览器devtool可以查看变量： http://localhost:8081/debugger-ui/ npm install -g react-devtools下载rn...flex占满剩余空间，view设置style大小才管用（其他空间，设置style好像不行，比较坑） react安装unimodules https://docs.expo.io/bare/installing-unimodules...react-native link @react-native-community/art 命令修改android/settings.gradle和android/app/build.gradle文件 自定义原生控件...Invariant Violation: Module AppRegistry is not a registered callable module (calling runApplication) 自定义组件
VScode是我个人及其喜欢的一款前端开发工具。下面，咱们一起使用插件一键启用 Visual Studio Code 的毛玻璃效果。...itemName=eyhn.vscode-vibrancy 在 VSCode 中按下 F1 键，输入命令 “Reload Vibrancy” 最最最最后 重启 VSCode 就OK了。...⚠️ ㅤ注意 如果插件显示 VSCode 已损坏 这个时候，非常重要的地方来了！！！ 此时此刻，你应该，点击不再提示即可，不会影响使用。...设置 在 VSCode 中使用快捷键 Ctrl + , 打开设置界面，在左边找到 Extensions -> Vibrancy Effect进行设置。 冲冲冲！
（友情提示：RN学习，从最基础的开始，大家不要嫌弃太基础，会的同学请自行略过，希望不要耽误已经会的同学的宝贵时间） VS Code是一个专门为React Native项目提供开发环境的扩展开发插件工具。...插件地址：https://github.com/Microsoft/vscode-react-native 它具有打开文件夹功能，定位到React Native项目的根目录直接使用文件夹打开功能就可以，...，然后点击configure左端最上面的设置按钮 ? ，选择 React Native 调试环境。 如下图： ?...运行ios命令触发react-native run-ios，在模拟器中可以运行ios应用。 使用Packager命令，可以打开和关闭React-Packager。...我们需要重新启动VS Code使更改设置（智能提醒）生效。 提示：最新版本本身就支持Salsa智能提醒。
2.2 RN&Weex 图片来源于网络 由于H5的那些弊端，爱折腾的前端工程师，祭出了RN、Weex两个大杀器， 使用原生去解析RN、Weex的显示配置，显示层、逻辑层都直接与原生数据通信。...但是既然作为支持跨双端的开发，个人还是推荐使用 VSCode。 VSCode安装完成后，需要安装Flutter插件，和Dart插件....5.3 启动模拟器 点击VSCode右下角的模拟器，启动模拟器。...(VSCode会自动找到Android环境、IOS环境下的模拟器，以及真机环境) 5.4 启动项目APP 选中Main.dart， 点击Debug-> Start Debugging , 项目就会启动调试...，并在模拟器里运行。
）的RN和国内顶级互联网公司对于RN的实践与应用，就足矣证明其实力!...（可以脱离VS单独安装，也可以使用其他其他模拟器或真机调试） 环境搭建分为两个部分： 1、Android开发环境搭建（之前已经设置过，可以跳过此步骤）； 2、RN开发环境搭建； 1、Android开发环境搭建...）运行的，真机或其他模拟器相同，第一次运行会出现错误，如图： ? ...解决方案：设置IP和端口，具体操作，摇一摇手机，Visual Studio Emulator for Android（模拟器）如图： ? ...解决方案：设置 =》 开发者选项 =》 关闭“启动MIUI优化”
的标志，然后将共享与权限改为读写，然后找到下面的设置标志，进行应用所有的文件夹，最后保存！...export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn //国内用户需要设置 博主我使用的是清华提供的镜像地址，也是可以用的...创建好了以后呢可以直接进入项目，运行： flutter run 等待一下构建，他会自动找到我们打开的模拟器，打开这样的话说明成功了 使用vscode进行编写代码 我们为了调试代码方便，使用xcode...不是不可以，只是xcode是一个比较重的编辑器，占用内存比较厉害，这里推荐使用vscode进行编码，我们需要安装一些插件 flutter 安装结束以后我们导入项目 大概说一下项目目录，我们没有必要全部认识...所以学习成本相对来说比RN和Ionic要高一些。不过话说回来，大家都等别人搞社区踩坑的话，技术就没办法进步了！
ANDROID_HOME RN 内使用该变量进行 Android SDK 查找，代码如下： 因此你需要设置此环境变量： 1....第一种方式是在本机安装 Android 模拟器，模拟一个 Android 系统。...这里推荐使用 Genymotion，个人用户免费的模拟器。...设置你的手机允许 USB 调试 使用 USB 连接你的手机和电脑 运行命令 $ adb devices 查看当前可用设备，确认调试连接是否成功。...启动调试 在 AwesomeProject 项目目录运行 $ react-native run-android，如果你使用的运行环境是模拟器，如无意外，你将会在你的模拟器上看到这个画面：
react的应用，是用自定义组件或原生组件层层嵌套而成的。因此我将整个应用划分为组件部分（组成各个页面）和一些其他服务（目前比较简单，只抽象出发get请求的网络服务）。...在手机上设置host的ip，点击start chrome debugging。 chrome会自动跳转到调试地址，在浏览器上打开调试窗口，会发现里面多了一个react页签。...inspect元素：在模拟器中打开inspect element面板，点击模拟器中的元素，chrome会跳转到对应dom。 槽点： 在浏览器改动css后，模拟器的布局不跟着更新。...而这些低级错误，RN里面往往会非常难排除，提示往往都很奇怪，我都是靠走读代码发现。...如果ListView包在一个View中，那么外面这个View需要设置style={flex: 1}。否则ListView将不能滚动。
收纳时间：2019-2-25 - 2019-3-3 共收纳项目：20 个 ---- vsc-netease-music 一个开源的 VSCode 插件，让你能在 vscode 上划水听音乐 GitHub...github.io/python-cheatsheet/ GitHub：https://github.com/gto76/python-cheatsheet iSimulator 一款实用的 GUI 工具，可用于控制模拟器和管理模拟器里安装的应用...一份收集整理了前端常用的框架、工具和插件等资料集合 GitHub：https://github.com/sorrycc/awesome-f2e-libs PicGo 一款简单易用的图片上传工具，支持自定义第三方图床...一个开源的 VSCode 插件，让你能在 vscode 上划水看小说 [doge] GitHub：https://github.com/my-soul/read-vscode-e edex-ui 一款跨多平台的终端模拟器与系统监控器...cn/go2-book/ GitHub：https://github.com/chai2010/go2-book PPRows 一款在 Mac 上计算你写了多少行代码的工具，支持同时检测多文件夹代码，自定义检测的文件类型等
之前一篇写了《逻辑性最强的React Native环境搭建与调试》说了RN的安装，今天在这里做一个复盘，让我们能够更直观更深入的了解React Native（以下简称RN）,这一篇重点来说的就是，安装之后必报的...init xxx(项目名称)； b).在模拟器或手机安装app：进入项目根目录执行命令：react-native run-android；执行完此命令之后，如果是第一次运行，命令会帮你在手机或者模拟器创建一个...翻译中文：没有找到开发服务； 产生原因：安装的app没有设置服务器和端口号。...解决方案： 1.摇一摇，或者其他途经，弹窗RN设置浮层，如果用的是Visual Studio Emulator for Android上呼出设置浮层快捷键是：先按“ESC”再按“ALT”，设置浮层如图：...也可以在RN开发浮层上设置启动 Hot Reloading，每次文件修改都会自动刷新，大大节约了调试的时间！ 解决了以上2个问题，第一次运行RN App的问题就已经全部解决了，祝使用愉快！
初始化项目工程 进入自己的工作空间然后shift+鼠标右键打开命令行窗口执行如下命令创建RN工程HelloWorld： 然后使用Android Studio打开AVD Manager创建模拟器，在打开...Android Studio的时候会提示创建Android项目，我们的目的只是为了打开模拟器，就随便创建一个项目就行了，创建之后就直接打开模拟器： 几乎是一路next昂- -# ， 应该没什么难度。...因为之前试验过，直接从这里创建的话，（有时候）会导致x86硬件加速无法启动，模拟器就会很卡，还有就是如果通过这个exe直接创建模拟器的话，外观会很不好看的╮(╯▽╰)╭ 然后进入打开刚刚创建的项目HelloWorld...原来还需要一步，把手机和RN的调试源给连接起来： 戳 ↓ ↓ ↓ 填入调试电脑的ip和端口： ip的简便获取方法： 端口号是在运行react-native run-android 之后出现的...React packager窗口上提示的这个程序的端口号，默认是8081： 设置完后返回点击菜单键弹出菜单，里面点击reload js 。。。。
;%JAVA_HOME%\lib\tools.jar （一定不要忘了前面的点） （二）Android Studio、SDK以及模拟器（如果是真机运行不需要安装模拟器） Android Studio...SDK和安卓模拟器： 打开Android Studio，File --> Settings --> 搜索sdk,找到对应的sdk进行安装即可，这里也可以选择安装模拟器，找到对应的勾选进行下载即可。...4、给yarn设置镜像（如果不用yarn命令，可以不设置这一项）： yarn config set registry https://registry.npm.taobao.org --global...创建项目 （二）手动打开安卓模拟器 可以使用脚本打开， （二）编译并运行 React Native 应用 在刚创建的rn项目根目录，打开命令行，输入react-native run-android命令，...rn_demo。
弊 无法利用VScode默认自带功能实现点击跳转，比如我们看代码时候经常需要点击一个require的链接，然后实现跳转，但是使用这种alias的时候不能实现自动跳转 无法利用VScode默认自带的路径导入功能...如果你采用绝对路径的方式书写方法时，VScode的这一功能就爱莫能助了 完全不需要考虑代码重构问题 RN-web和RN的代码打包方式不一致，可能产生冲突，因为RN用的是babel结合bundleJS打包的...，而web是根据webpack打包的，两者在设置全局alias的时候方式可能不一样，需要测试预估风险 使用相对路径，并依靠VScode自带功能提升效率 利 实际上，今天的VScode已经非常强大了，上面的对比其实就讲了...VScode自带功能，给相对路径的效率带来的巨大提升： VScode默认自带相对路径跳转功能，实现相对路径点击跳转。...插件生态问题：我们团队不可能大家都用VScode, 而且本来VScode就不一定有这种插件，而其他IDE的社区就更差了，我认为能通过插件达到效果的希望不大 就算真的有这些插件，使用起来似乎也不太方便，
4 com.android.ddmlib.InstallException: Failed to establish session 这是小米手机调试的问题，我之前用魅族就没这问题 解决方法：小米手机设置里...请按照以下的步骤来修复此问题： 确保包服务器在运行 确保你的设备或者模拟器连接着电脑，并且手机打开了USB调试模式，然后在cmd中运行adb devices来查看已经连接好的设备列表 确保飞行模式是关闭的...解决方案：小米手机设置里-------开发者选项---------启用MIUI优化关闭 其他问题补充： Q：RN所支持的最低iOS和Android版本？...浏览器端的js库，涉及到DOM、BOM、CSS等功能的模块无法使用，因为RN的环境中没有这些东西 Q：如何升级RN版本？...A：点击iOS模拟器顶部的Hardware菜单，选择Shake Gesture（对应真机摇一摇），会自动弹出如下图的菜单。 安卓模拟器则是点击菜单键，真机上没有菜单键的，摇一摇即可。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
腾讯会议
云直播
对象存储
