ReactNative开发环境搭建

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

公共基础环境搭建

IOS 开发环境搭建

Android 开发环境搭建

第一个 ReactNative 项目


公共基础环境搭建

  • 安装 Node 和 Watchman
    • Node 安装可以有多种方式,可以去 官网 下载进行安装;也可以使用 homebrew 安装, 或者使用 nvm 安装, Node 版本必须是 v10 或者以上的版本
    • Watchman 可以使用 homebrew 安装,Watchman 是 Facebook 提供的监控文件系统变更的工具,安装此工具可以提高开发性能
    • homebrew 安装命令
    • brew install node
      brew install watchman
  • 安装 Yarn
    • 可以使用 npm 安装, 也可以去 官网 下载安装(Windows 系统) 或使用 命令行安装
    • # 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 文件中,然后重启系统
    • # 此处的 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 之后自带的)
    • # ProjectName 指的是项目名称
      npx react-native init ProjectName
    • 创建项目耗时可能比较长,耐心等待创建完成即可, 如果出错,建议将 npm 的镜像源改为淘宝的镜像源
  • 编译并运行项目

    • 进入到项目目录,使用 VSCode 打开项目代码, 查看 package.json 文件;可以看到 scripts 中为我们提供了一些命令让我们使用
    • "scripts": {
          "android": "react-native run-android",
          "ios": "react-native run-ios",
          "start": "react-native start",
          "test": "jest",
          "lint": "eslint ."
      },
    • 接下来我们开始运行项目;先启动服务,然后运行对于平台的项目
      • 运行 IOS
        • yarn start
          yarn ios
      • 运行 Android
        • yarn start
          yarn android
    • 系统会自动打开模拟器,并进行项目的编译最终打包运行到模拟器上
    • 接下来我们看一下运行效果图:
    • IOS运行效果图
    • Android运行效果图
    • 修改内容后的运行效果图

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

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


  转载请注明:

文章作者: Diviner
文章链接: http://www.diviner.site/archives/21cd8dcf.html
版权声明: 本博客所有文章除特别声明外,均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来自 Divinerの博客 !

评论
 上一篇
ReactNative属性(props)和状态(state) ReactNative属性(props)和状态(state)
【基础篇】ReactNative 属性(props)和状态(state)Props 属性 State 状态 Props 属性通常情况下, 我们创建一个组件时回定制我们需要的参数,而这些参数就称为属性(Props)接下来,我们使用 &l
下一篇 
React[16.6]生命周期介绍 React[16.6]生命周期介绍
【基础篇】React 生命周期介绍及引入 LessReact 生命周期 React 引入 Less React 设置 AntD 自动加载样式 React 生命周期 生命周期演示 代码 import React from "rea
  目录