美文网首页
React Native-Mac项目搭建-02

React Native-Mac项目搭建-02

作者: quanCN | 来源:发表于2019-04-23 18:47 被阅读0次

安装依赖

mac安装必须安装的依赖有:Node、Watchman 和 React Native 命令行工具以及 JDK 和 Android Studio。

  • Homebrew来安装 Node 和 Watchman

    brew install node
    brew install watchman
    

    设置镜像源

    npm config set registry https://registry.npm.taobao.org --global
    npm config set disturl https://npm.taobao.org/dist --global
    

    注: Node需要v8.3版本以上

    Watchman则是由 Facebook 提供的监视文件系统变更的工具。安装此工具可以提高开发时的性能(packager 可以快速捕捉文件的变化从而实现实时刷新)

  • Yarn、React Native 的命令行工具(react-native-cli)

    Yarn是 Facebook 提供的替代 npm 的工具,可以加速 node 模块的下载。React Native 的命令行工具用于执行创建、初始化、更新项目、运行打包服务(packager)等任务。
    npm install -g yarn react-native-cli
    设置镜像源
    yarn config set registry https://registry.npm.taobao.org --global yarn config set disturl https://npm.taobao.org/dist --global

  • JDK
    React Native 需要JDK1.8版本

  • Android Studio

    android环境搭建

  • 配置 ANDROID_HOME 环境变量
    React Native 需要通过环境变量来了解你的 Android SDK 装在什么路径,从而正常进行编译

    ~/.bash_profile
    

    在文件中加入以下代码

    # 如果你不是通过Android Studio安装的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
    

    使用source $HOME/.bash_profile命令来使环境变量设置立即生效(否则重启后才生效)。可以使用echo $ANDROID_HOME检查此变量是否已正确设置。

项目搭建

  • 使用 React Native 命令行工具来创建项目:
    react-native init demo
    
  • 编译并运行 React Native 应用
    确保运行了模拟器或者连接了真机
    cd demo
    react-native run-android
    
    注:第一次运行时需要下载大量编译依赖,耗时可能数十分钟。此过程严重依赖稳定的翻墙工具
    如下图即为ok

webstorm创建项目

File–>new–>project


Node intercepter填写node.js的路径
create-react-app填写react-native-cli的路径
建好的项目如下


  • 项目运行
    1. 第一次运行需要中终端中输入react-native run-android成功以后退出即可
    2. 点击右上角run选择android即可

相关文章

网友评论

      本文标题:React Native-Mac项目搭建-02

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