美文网首页ReactNative
ReactNative+Webstorm开发环境搭建(基于And

ReactNative+Webstorm开发环境搭建(基于And

作者: Windows_XP | 来源:发表于2018-07-01 15:18 被阅读0次

    前言:
    WebStorm的开发环境搭建可以参考https://blog.csdn.net/calvin_zhou/article/details/79427566
    本文目的主要记录本地创建一个ReactNative工程并运行出来一个HelloWord程序

    1.nodejs官方网站下载并安装https://nodejs.org/zh-cn/

    1.png

    2.配置nodejs环境变量


    2.png 3.png

    测试是否安装完成

    打开cmd
    输入:node -v
    
    4.png

    3.配置npm源
    由于国外的npm服务器下载太慢了,因此配置国内的服务器如下:

    在图4的cmd窗口中
    输入:npm config set registry https://registry.npm.taobao.org --global
    输入:npm config set disturl https://npm.taobao.org/dist --global
    
    5.png

    配置完成

    4.安装react native环境

    在图5的cmd窗口中
    输入:npm install -g react-native-cli
    
    6.png

    5.新建ReactNative工程

    在图6的cmd窗口中
    切换到我需要新建工程的目录中,这里根据自己情况选择创建工程位置
    输入:e:
    输入:cd E:\ReactNativeWork
    新建一个react-native工程,工程名为Demo
    输入:react-native init Demo
    
    7.png 8.png 9.png

    6.把创建的工程中的android这个目录作为工程在AndroidStudio中打开,并把 HelloWord 跑起来
    这里就不多说了,根据自己的AndroidStudio开发环境进行调试,最终只要跑起来就行了


    10.png

    7.开启本地服务器

    在WebStorm中输入:npm start
    
    11.png

    然后再在AndroidStudio中发布一次就行了

    12.png

    成功跑起!
    ps:我这里用的不是最初创建的Demo工程,是我自己的一个工程
    我也是才接触ReaceNative,有些理解不到位的地方欢迎指正,
    遇到问题可留言,在我能解决的范围内一定回复

    相关文章

      网友评论

        本文标题:ReactNative+Webstorm开发环境搭建(基于And

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