ReactNative开发环境搭建

  |     |   本文总阅读量:

【基础篇】ReactNative开发环境搭建及第一个程序运行

公共基础环境搭建

IOS开发环境搭建

Android开发环境搭建

第一个ReactNative项目


公共基础环境搭建

  • 安装Node和Watchman

    • Node安装可以有多种方式,可以去 官网 下载进行安装;也可以使用homebrew安装, 或者使用 nvm 安装, Node版本必须是 v10或者以上的版本
    • Watchman可以使用homebrew安装,Watchman是Facebook提供的监控文件系统变更的工具,安装此工具可以提高开发性能
    • homebrew安装命令
    • 1
      2
      brew install node
      brew install watchman
  • 安装Yarn

    • 可以使用 npm 安装, 也可以去 官网 下载安装(Windows系统) 或使用 命令行安装
    • 1
      2
      3
      4
      # npm 安装
      npm install -g yarn
      # 命令行安装
      brew install yarn

IOS开发环境搭建

  • 安装 XCode
    • 需要 XCode 版本为10或者更高版本, 可以在 App Store中安装或者去 Apple开发者官网 下载安装
    • 安装成功后,需要配置 XCode的命令行工具
    • 启动XCode,打开 Preferences 下的 Locations, 选择一个 Command Line Tools, 如图所示:
    • XCode命令行工具配置

Android开发环境搭建

  • 安装JDK 8(目前不支持更高版本)
    • Oracle官网 下载即可,此处需要注意,如果不是下载最新版本,则必须登录后才可以下载
    • 下载完成后直接安装即可, Windows系统可能还需要配置环境变量
  • 安装Android Studio
    • 如果可以科学上网, 则可以直接去Android Studio官网下载并进行安装
    • 如果不能访问官网, 则可以通过Android Studio中文社区 进行下载
    • 下载完成后进行安装,之后打开进行SDKAVD的相关配置
    • 启动Android Studio,打开 Preferences 找到 Android SDK
    • 首先选择 SDK Platforms 选项,在界面右下角的位置处,勾选 Show Package Details 选项,然后在中间的SDK版本中找到 Android 9.0(Pie),选择其下边所有的选项
    • 然后选择 SDK Tools 选项,选择下边所有的工具
    • 最后点击 Apply 进行安装,此过程有点漫长,需要耐心等待。安装完成后点击 Finish 完成,点击 OK 保存, 这样 SDK 安装完成
    • SDK Platforms
    • SDK Tools
  • 配置Android模拟器
    • 启动Android Studio,打开 AVD Manager, 创建一个Android模拟器并启动即可。 注意:创建模拟器时也选择Android 9.0,这样可能会避免一些不必要的麻烦
  • 配置SDK环境变量
    • 将如下配置添加到用户根目录下的.bashrc或者.zshrc等类似的终端配置文件下;或者一步到位直接添加到 /etc/profile 文件中,然后重启系统
    • 1
      2
      3
      4
      5
      6
      # 此处的 ANDROID_HOME 是 SDK 的存放目录
      export ANDROID_HOME=$HOME/Library/Android/sdk
      export PATH=$PATH:$ANDROID_HOME/tools
      export PATH=$PATH:$ANDROID_HOME/tools/bin
      export PATH=$PATH:$ANDROID_HOME/platform-tools
      export PATH=$PATH:$ANDROID_HOME/emulator

第一个ReactNative项目

  • 创建项目

    • 如果你之前全局安装过旧的react-native-cli命令行工具,请使用npm uninstall -g react-native-cli卸载掉它以避免一些冲突

    • 使用 npx 命令创建项目(安装完Node之后自带的)

    • 1
      2
      # ProjectName 指的是项目名称
      npx react-native init ProjectName
    • 创建项目耗时可能比较长,耐心等待创建完成即可, 如果出错,建议将 npm 的镜像源改为淘宝的镜像源

  • 编译并运行项目

    • 进入到项目目录,使用 VSCode 打开项目代码, 查看 package.json 文件;可以看到 scripts 中为我们提供了一些命令让我们使用

    • 1
      2
      3
      4
      5
      6
      7
      "scripts": {
      "android": "react-native run-android",
      "ios": "react-native run-ios",
      "start": "react-native start",
      "test": "jest",
      "lint": "eslint ."
      },
    • 接下来我们开始运行项目;先启动服务,然后运行对于平台的项目

      • 运行IOS

        • 1
          2
          yarn start
          yarn ios
      • 运行Android

        • 1
          2
          yarn start
          yarn android
    • 系统会自动打开模拟器,并进行项目的编译最终打包运行到模拟器上

    • 接下来我们看一下运行效果图:

    • IOS运行效果图

    • Android运行效果图

    • 修改内容后的运行效果图

至此,关于ReactNative开发环境的搭建和第一个应用示例已经完成,如有不足的地方,希望读者可以指正。谢谢!

注意:此示例是基于0.61版本编写


赏作者一颗糖吧, 您的支持将鼓励我继续创作!



文章目录
  1. 1. 【基础篇】ReactNative开发环境搭建及第一个程序运行
    1. 1.0.1. 公共基础环境搭建
    2. 1.0.2. IOS开发环境搭建
    3. 1.0.3. Android开发环境搭建
    4. 1.0.4. 第一个ReactNative项目
您是第 位小伙伴 | 本站总访问量 | 已经写了 22.6k 字啦

载入天数...载入时分秒...