美文网首页vueReact native
开发环境搭建指导

开发环境搭建指导

作者: 荼蘼toome | 来源:发表于2020-01-02 17:54 被阅读0次

    开发工具

    • WebStorm/Nuclide/VS Code/Sublime
      我是用的是vs code

    • AndroidStudio
      安卓 开发者平台上
      安装配置

    • XCode
      ios 需要mac电脑

    • Node.js/NPM
      必备基础 node.js官网选择下载不同的安装包

    JavaScript

    ES6/ES7/ES8/ES9

    React

    安卓包
    image.png

    搭建开发环境

    1.工具:
    node.js环境

    • chocolatey
    • 直接下载node.js安装包
      官网 win对应版本
      npm -v 查看版本号

    在 windows平台上开发React Native

    cmd

    2.React Native命令行工具
    安装脚手架依赖

    npm install -g react-native-cli

    可以通过react-native --help 查看他所支持的所有命令



    通过init初始化项目
    -h帮助
    -v命令行版本

    3.用于开发安卓..ios的工具
    Android Studio / XCode
    安卓官网..服务器是外国的,,,没有╮(╯_╰)╭翻墙吧.菜菜

    4.创建项目
    打开终端
    react-native init 项目名称


    初始化项目
    1. Android Studio
      React Native目前需要Android Studio2.0或更高版本
      Android Studio需要Java Development Kit [JDK] 1.8,你可以在命令行中输入javac -version来查看你当前安装的JDK版本。如果版本不合要求,则可以到 官网上下载。
      Android Studio包含了运行和测试React Native应用所需的Android SDK和模拟器。请不要改动安装过程中的选项。
      android studio的安装和配置参考React-native中文网
      本人下载android studio,安装后提示没有下载android sdk,重新下载的android sdk,并设置环境变量Android Home
      ANDROID_HOME 环境变量
      image.png
      image.png

    首先来了解一下这个命令执行了哪些东西:
    React native 从npm上下载了一些项目所依赖的呗,并完成初始化
    告诉我们怎么运行初始化的 项目

    windows平台无法安装ios模拟器
    安卓:react-native run-android

    image.png
    目录结构
    image.png
    test:用于测试
    android:安卓项目
    ios:ios项目
    node_modules:安装配置
    index_android.js:入口
    0.49后似乎已经统一入口了!就是index.js,你说的index.android.js和index.ios.js那都是老版本了,而且多看文档!不要老看旧的教程!

    运行项目

    • 启动安卓的模拟器
      打开终端,切换项目根目录
      react-native run-android
      代码

    啊啊啊啊啊啊啊啊啊啊啊啊啊~~
    这是啥错......折磨人

    等待时间较长的话,配置一个国内淘宝镜像服务器
    不推荐使用cnpm.cnpm安装的模块路径比较奇怪,packager不能正常识别!
    找到nodejs文件夹.npmrc
    添加registry=https://registry.npm.taobao.org

    相关文章

      网友评论

        本文标题:开发环境搭建指导

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