美文网首页
react native小白入门之开发环境配置

react native小白入门之开发环境配置

作者: 小欧lq | 来源:发表于2017-03-22 22:56 被阅读188次

    没有配置android环境建议先配置环境再看文章

    android环境配置

    配置好了往下看

    window下配置

    react native搭建环境  中文网的命令行搭建react native开发环境我之前用Chocolatey命令行不会自动配置环境变量,建议到node.js,python官网下载安装包


    1.下载node.js(稳定版跟最新版都可以)

    node.js


    2.下载python (python下载2.多的版本,3.多的版本不支持)

    python 


    3.安装react-native命令行工具,用于执行创建、初始化、更新项目、运行打包服务(packager)等任务。

    npm install -g react-native-cli


    4.创建项目

    进入你的工作目录,按Shift+右键选“在此处打开命令窗口”,不要用cmd打开命令窗口,工作目录最好不要选系统盘,不要选系统盘,不要选系统盘,运行

    react-native init MyProject

    这一步是创建一个项目名为MyProject的react native项目,要等大概10分钟左右,看网速

    cd MyProject  或者 直接打开MyProject文件夹

    进入项目工程

    5.然后运行packager

    react-native start

    这时候可以用浏览器访问http://localhost:8081/index.android.bundle?platform=android,如果可以访问表示服务器端已经可以了。

    6.运行安卓项目

    保持packager开启,另外打开一个命令行窗口,然后在工程目录下运行

    react-native run-android

    首次运行需要等待数分钟并从网上下载gradle依赖。(这个过程屏幕上可能出现很多小数点,表示下载进度。这个时间可能耗时很久,也可能会不停报错链接超时、连接中断等等——取决于你的网络状况和墙的不特定阻断。总之要顺利下载,请使用稳定有效的科学上网工具。)

    运行完毕后可以在模拟器或真机上看到应用自动启动了。

    摇晃设备或按Menu键(Bluestacks模拟器按键盘上的菜单键,通常在右Ctrl的左边 或者左Windows键旁边),可以打开调试菜单,点击Dev Settings,选Debug server host for device,输入你的正在运行packager的那台电脑的局域网IP加:8081(同时要保证手机和电脑在同一网段,且没有防火墙阻拦),再按back键返回,再按Menu键,在调试菜单中选择Reload ,就应该可以看到运行的结果了。

    我的夜神模拟器安装应用总是adb断掉不知道为什么,最好用手机测试,我手机也不需要输电脑ip端口号,不知道跟手机版本有木有关系,还是react native 更新了功能

    如果真实设备白屏但没有弹出任何报错或者闪退的情况,可以在安全中心里看看是不是应用的“悬浮窗”的权限被禁止了。

    安卓调试

    打开Chrome,访问http://localhost:8081/debugger-ui,应当能看到一个页面。按F12打开开发者菜单。

    在模拟器或真机菜单中选择Debug JS,即可开始调试。

    相关文章

      网友评论

          本文标题:react native小白入门之开发环境配置

          本文链接:https://www.haomeiwen.com/subject/nskanttx.html