美文网首页
RN-开发环境搭建-Mac平台

RN-开发环境搭建-Mac平台

作者: hliccy | 来源:发表于2017-06-07 20:17 被阅读93次

    1 NodeJS开发环境

    2 React Native Command Line Tools 工具

    3 Xcode/AndroidStudio

    4 HelloReactNative

    安装NodeJS开发环境

    Homebrew Mac系统的包管理器, 用于安装NodeJS和其它工具软件Homebrew详细介绍

    brew install <软件名称>
        •   Homebrew 会将套件安装到独立目录,并将文件软链接至 /usr/local 。
        •   Homebrew 的所有文件均会被安装到预定义目录下,所以您无需担心 Homebrew 的安装位置。
    brew search <软件名称>
    执行此命令,brew会匹配有关该名称的所有软件并标识已经安装的软件。
    brew list 查看用brew安装的所有软件
    brew update
    brew upgrade <使用brew已安装的软件名称>
    brew uninstall <使用brew已安装的软件名称>
    
    /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
    

    注意:在Max OS X 10.11(El Capitan)版本中,homebrew在安装软件时可能会碰到/usr/local目录不可写的权限问题。可以使用下面的命令修复:

    sudo chown -R `whoami` /usr/local
    

    安装Node环境
    我们在初始化React Native应用或从npm上安装一些组件的时候通常的情况下是比较慢的,这是因为npm的服务是设在国外的,所以在国内访问的速度不是很理想。提高项目初始化的速度我们可以为npm设置一个国内镜像,让npm每次下载组件的时候都从国内的镜像上获取这样一来速度就会大大提高。

    brew install node
    npm config set registry https://registry.npm.taobao.org --global
    npm config set disturl https://npm.taobao.org/dist --global
    
    在iOS电脑上我们可以在.npmrc文件中设置npm的下载镜像地址,.npmrc文件通常在/Users/用户名/.npmrc路径下,打开此文件然后添加:registry = https://registry.npm.taobao.org
    
    

    安装React Native Command Line Tools 工具

    npm install -g react-native-cli
    

    如果你看到EACCES: permission denied这样的权限报错,那么请参照上文的homebrew译注,修复/usr/local目录的所有权

    sudo chown -R `whoami` /usr/local
    

    React Native命令行工具安装成功之后,我们可以通过react-native --help来查了它索支持的所有命令

    安装Xcode/AndroidStudio

    AppStore上搜索XCode并进行下载安装

    Android开发环境详见 Mac系统 Android开发环境配置

    HelloReactNative

    初始化一个React Native应用,我们可以通过React Native命令行工具来完成,打开终端输入并运行下面命令:

    react-native init <项目名字>
    如:
    react-native init HelloReactNative
    
    

    运行应用

    第一种方式:通过React Navtive命令行工具

    cd HelloReactNative
    react-native run-ios
    react-native run-android
    
    注: 
    
    1 执行 react-native run-android 需要先启动android模拟器
    2 执行失败
    FAILURE: Build failed with an exception.
    * What went wrong:
    A problem occurred configuring project ':app'.
    > SDK location not found. Define location with sdk.dir in the local.properties file or with an ANDROID_HOME environment variable.
    
    进入android文件夹 添加 local.properties  添加android sdk路径 
    如: sdk.dir = /Users/用户/Library/Android/sdk
    
    

    第二种方式:通过Xcode或者AndroidStudio运行项目

    相关文章

      网友评论

          本文标题:RN-开发环境搭建-Mac平台

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