美文网首页react-native-导航
Mac搭建React Native开发环境和错误解决

Mac搭建React Native开发环境和错误解决

作者: 小小小鸡腿 | 来源:发表于2018-08-19 19:44 被阅读0次

    基本环境安装

    1.安装Homebrew(这是安装Node.js和其他工具的基础环境)

    打开终端,输入以下指令

    /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
    

    经过漫长的等待,大概下载了十几分钟吧。所以不要着急。下载完会有如下success的提示


    成功安装

    注意:中间会有按一下回车的提示,敲下回车就可以了

    2.安装Node.js

    如果上一步Homebrew不成功的话会提示

    -bash: brew: command not found
    

    安装Node.js命令如下

    brew install node
    

    这里可能会自动更新一下Homebrew,等着就行了。安装完成之后可以通过以下命令查看安装的Node.js的版本

    npm -v
    

    3.安装React Native命令行工具

    通过npm包管理工具进行安装

    npm install -g react-native-cli
    

    命令行工具安装完成之后,可以通过react-native --help来查看所有命令

      Usage: react-native [command] [options]
    
    
      Commands:
    
        init <ProjectName> [options]  generates a new project and installs its dependencies
    
      Options:
    
        -h, --help    output usage information
        -v, --version output the version number
    

    比如:可以直接通过init后面跟项目名称初始化一个RN项目,-h可以查看帮助文档,-v可以查看当前版本

    开发工具下载

    • 安卓开发:Android Studio
    • iOS开发:通过App Store直接搜索下载

    React Native应用快速构建

    1.初始化项目

    首先cd到你需要创建项目的目录,比如 cd Desktop/ 创建到桌面
    输入命令行,其中FirstApp就是你的项目名称

    react-native init FirstApp
    

    安装完成后会有如何运行项目的提示信息

    To run your app on iOS:
       cd /Users/mazheng/Desktop/FirstApp
       react-native run-ios
       - or -
       Open ios/FirstApp.xcodeproj in Xcode
       Hit the Run button
    To run your app on Android:
       cd /Users/mazheng/Desktop/FirstApp
       Have an Android emulator running (quickest way to get started), or a device connected
       react-native run-android
    

    2.命令行运行RN项目

    首先cd到项目目录,比如cd到上面创建的FirstApp文件夹,运行命令(iOS为例)

    react-native run-ios
    

    之后会启动iPhone模拟器,并自动打开一个窗口,这个窗口主要是运行包管理器,向模拟器同步代码


    同步代码

    可能会出现的问题

    1. 如果遇到error: unable to find utility "instruments", not a developer tool or in PATH错误信息,可输入指令解决sudo xcode-select -s /Applications/Xcode.app/Contents/Developer/如果电脑上安装多个版本的Xcode,可替换命令中的Xcode为你想要运行的版本,如电脑上还存在Xcode8.3,可修改命令为sudo xcode-select -s /Applications/Xcode8.3.app/Contents/Developer/即可解决
    2. 如果运行起来一片红,如下图


      运行错误

    解决方法:

    • 打开两个终端
    • 第一个终端输入react-native start


      启动完成
    • 第二个终端输入react-native run-ios运行
      运行成功

    注意:两个终端都需要cd到项目目录哦

    相关文章

      网友评论

        本文标题:Mac搭建React Native开发环境和错误解决

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