美文网首页
React Native 环境搭建

React Native 环境搭建

作者: 松n_n鼠 | 来源:发表于2020-04-02 10:59 被阅读0次

    其实早就应该学习 React Native 了,但是一直拖着,一拖就拖到了现在,好在现在有时间好好学习下,一下就是我搭建环境的过程,看起来和之前的 Cordova 很像,简单的介绍就不说了,网上有很多详细的资料。

    1. 安装 Node,先通过 node -v 命令查看电脑是否安装过 Node。如果未安装过使用以下命令进行安装:$ brew install node

    2. 安装 watchman,执行命令 $ brew install watchman

    在我安装Watchman的时候遇到两个问题,两个是警告,一个是警告:
    Warning: libusbmuxd is outdated!
    To avoid broken installations, as soon as possible please run:
    brew upgrade // 指的是更新所有包
    Or, if you're OK with a less reliable fix:
    brew upgrade libusbmuxd //指的是更新指定包
    首先我想解决warning:brew upgradebrew upgrade libusbmuxd

    第二个警告:
    Warning: Building python from source:
    The bottle needs the Apple Command Line Tools to be installed.
    You can install them, if desired, with:
    xcode-select --install
    当我使用命令安装 Command Line Tools的时候提示我软件不能下载,因为网络出现错误,所以去苹果官方去下载了安装包进行的安装:
    前往https://developer.apple.com/download/more下载xcode command line tools(需要登录AppleID)

    错误是:
    Error: An exception occurred within a child process:
    DownloadError: Failed to download resource "python"
    Download failed: https://www.python.org/ftp/python/3.7.7/Python-3.7.7.tar.xz
    解决完两个warning之后重新安装watchman,提示安装成功了。此错误也就没了

    3. 查看并设置npm镜像

    $ npm config get registry //查看镜像
    // 设置镜像
    $ npm config set registry https://registry.npm.taobao.org --global
    $ npm config set disturl https://npm.taobao.org/dist --global
    

    4. 安装Yarn、React Native 的命令行工具

    $ npm install -g yarn react-native-cli
    

    执行报错:

    15857530015366.jpg

    更新 OpenSSL教程: https://www.jianshu.com/p/32f068922baf
    Homebrew 国内镜像源教程:https://zhuanlan.zhihu.com/p/102760018

    • 这里一直有一个warning是版本太低,是我执行安装React Native命令的时候的问题,可能是官方支持的版本只是0.5.4?这里暂时只是个猜测,也可以找到路径手动修改mkdirp的版本,但是不太清除会有什么影响,手动修改路径在/usr/local/lib/node_modules/react-native-cli/node_modules路径下
    • 第二个错误也是因为没有写入权限的问题,执行sudo npm install -g yarn react-native-cli

    5. 设置yarn镜像源

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

    6. 创建项目

    $ react-native init AwesomeProject // 或者使用npx react-native init
    
    // cd到项目路径
    $ cd /Users/XXX/AwesomeProject
    // 命令运行模拟器
    $ react-native run-ios  // 或者使用npx react-native run-ios
    
    15857943588622.jpg 15857943974814.jpg

    到这里React Native环境搭建,重新创建一个新项目就到此为止了,更多的可以参考React Native中文网集成到现有项目点这里

    相关文章

      网友评论

          本文标题:React Native 环境搭建

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