美文网首页
windows下react-native 开发环境搭建

windows下react-native 开发环境搭建

作者: 蓬蒿151 | 来源:发表于2018-01-04 18:14 被阅读0次

    1、react-native安装

     npm install -g react-native-cli 
    

    可以使用yarn代替npm,安装更快

    yarn global add react-native-cli
    

    校验是否安装成功

     react-native -v 
    

    2、使用脚手架初始化项目

    react-native init MyProject
    

    时间比较长,可以多尝试几次

    3、安卓虚拟机安装,并启动前

    建议使用genymotion安卓模拟器(有真机的情况,使用真机)

    4、运行项目

    项目运行前,必须启动

    cd MyProject
    npm install 或 yarn
    启动react-native服务
    react-native start
    在模拟器中运行
    react-native run-android
    

    第一次使用虚拟机运行时,会发生如下报错:

    解决方式(为设备配置Debug server host & port)
    Ctrl+M(或点击摇一摇)打开配置页面

    配置完毕。点击R+R,reload页面(出现白屏时,构建静态资源目录)

    使用VS Code + react-devtools + genymotion搭建开发环境

    (推荐使用VS Code进行开发,Android Studio进行APK打包)

    1、VS Code、react-devtools、genymotion搭建开发环境下载安装(略)

    react-devtools安装方式
    npm install react-devtools -g
    

    2、VS Code RN 开发环境搭建

    VS Code安装 React Native Tools(演示)

    Debug Andriod调式器搭建

    配置完成,点击启动debug调式模式
    配置页面启动页更新

    3、react-devtools进行页面样式调式


    总结

    1、开发环境:

    推荐使用VS Code(代码开发、调式) + react-devtools(页面样式调式) + genymotion(安卓虚拟机);

    2、打包apk:

    推荐使用 Android Studio;

    相关文章

      网友评论

          本文标题:windows下react-native 开发环境搭建

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