• 概述前面我们介绍过window环境下开发React Native项目,今天说说怎么在mac上搭建一个RN的开发环境。配置mac开发环境基本环境安装1.先安装Homebrew:用于安装NodeJS和其他工具。 注:Homebrew详解,对这个比较...

    概述

    前面我们介绍过在window环境下开发React Native项目,今天说说怎么在mac上搭建一个RN的开发环境。

    配置mac开发环境

    基本环境安装

    1.先安装Homebrew:用于安装NodeJS和其他工具。
    这里写图片描述
    注:Homebrew详解,对这个比较了解的略过,我也是用mac没多久,这里给小白普及下。
    Homebrew全称Homebrew is the easiest and most flexible way to install the UNIX tools Apple didn’t include with OS X。是一个包管理器,用于在Mac上安装一些OS X没有的UNIX工具(比如著名的wget),Homebrew将这些工具统统安装到了 /usr/local/Cellar 目录中,并在 /usr/local/bin 中创建符号链接。
    安装Homebrew:

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

    这里写图片描述
    然后一路回车
    这里写图片描述
    最后出现success,就表示安装成功了。
    这里写图片描述
    安装完成后,可以用brew doctor命令检测下是否有什么冲突的地方。关于Homebrew其他的介绍可以自行查看官网资料。

    安装 Node.js

    React Native 需要 NodeJS 4.0或更高版本,Homebrew的Node默认包是6.0版本的,所以直接安装即可:

     brew install node

    这里写图片描述

    安装React Native 命令行工具npm

    之前我们说过npm是一个包管理工具,它是用来管理node的,详细介绍请看npm详解
    命令行工具可以轻松创建和初始化工程:

    npm install -g react-native-cli

    注:如果出现错误 :EACCES: permission denied,使用命令: sudo npm install -g React-native-cli.

    安装Yarn

    Yarn是Facebook提供的替代npm的工具,可以加速node模块的下载。React Native的命令行工具用于执行创建、初始化、更新项目、运行打包服务(packager)等任务。

    npm install -g yarn react-native-cli

    其他建议安装

    Watchman

    Whtchman是Facebook开发的一个检测文件系统变化的工具,在RN开发中可以检测js文件等是否有变化,从而达到保存及编译的效果。这个在windows中也有,个人觉得可装也可以不装,直接手机上reload也是可以的。

     brew install watchman

    Flow

    静态类型检查工具

    brew install flow

    Nuclide

    Facebook推出的一款React Native集成开发环境(IDE),不过我不太喜欢,我一般用webstorm+Android/ios 的ide。

    快速开发React Native

    每次学习一门新的语言,我们总是总喜欢来一个helloWord。

    react-native init HelloWord
    
    cd HelloWord 
    
    react-native run-ios

    注:也可以用Xcode打开iOS/HelloWord.xcodeproj 并点击Run按钮。
    小提示:react-native命令行从npm官方源拖代码时会遇上麻烦。请将 npm仓库源替换成淘宝的:

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

    关于在mac上怎么搭建Android的运行环境这里不在讲解,大家可以看看我之前的文章React 和Android的整合,这篇文章也是补了之前RN在windows环境下开发,而没有在mac下开发,后面我们将讲解怎么在mac上开发一款RN应用。

    展开全文
  • react-native目前是越来越火,很多人都开始接触,环境搭建就显得比较重要,具体方法可以看一下这两篇文章 1、mac上搭建步骤 2、Mac OSX 安装nvm(node.js版本管理器)执行命令 需要使用vpn,才能安装成功,国内...

    react-native目前是越来越火,很多人都开始接触,环境搭建就显得比较重要,具体方法可以看一下这两篇文章
    1、mac上搭建步骤
    2、Mac OSX 安装nvm(node.js版本管理器)

    在执行命令 需要使用vpn,才能安装成功,国内网络受限。

    nvm install node

    最后执行命令

    npm install -g react-native-cli

    命令结果显示

    执行命令 可以创建工程 这个过程是比较慢

    react-native init AwesomeProject

    运行工程执行命令

    react-native run-android

    我是通过android studio运行工程的
    目录结构

    最后在手机上的效果如图
    需要设置电脑的Ip和端口
    20161017115501103
    20161017115514228
    20161017115527092

    然后摇晃手机点击Reload 就可以看到改变的内容了。

    展开全文
  • 网上有很多react-native的入门教程,当然坑也很多。一方面是到处拼凑起来的资料,没有实际运行,很可能是有问题的;另一方面,对配置和运行中出现的问题没有详细介绍怎么解决(也可能是人家运气好,没有碰)。 我...

    介绍点啥

    网上有很多react-native的入门教程,当然坑也很多。一方面是到处拼凑起来的资料,没有实际运行,很可能是有问题的;另一方面,对配置和运行中出现的问题没有详细介绍怎么解决(也可能是人家运气好,没有碰上)。
    我是第一次研究移动端应用的开发,完全不懂Android和iOS这一类的技术。react-native略懂思路,所以按照书上和网上的教程做下来,遇到好多问题。这里分享出来,给同样运气差的你一个方向。

    下载开发工具和组件

    • Homebrew得会啊,不会的话去看看吧
    • Android studio(非必须,只用sublime就能开发)
    • sublime 3
    • node.js
    • flow(非必须,js强校验工具)
    • watchman(文件变更监控,react-native可以实现热更新)
    • react-native-cli(命令行工具)
    • xcode(基本上在终端启不来iOS版本的话,只能用xcode来编译了)
    • cocoapods(iOS版本开发必须)
    • yarn(Facebook 提供的替代 npm 的工具,可以加速 node 模块的下载)
    1. 安装node和watchman
    brew install node
    brew install watchman
    

    安装完node后要修改镜像地址,否则安装组件慢如牛,还不一定能装上

    npm config set registry https://registry.npm.taobao.org --global
    npm config set disturl https://npm.taobao.org/dist --global
    
    1. 安装yarn和react-native-cli
    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
    
    1. xcode在app store安装就行
    2. cocoapods比较坑,后面介绍安装

    初始化项目

    找一个你喜欢的角落,执行

    react-native init YouLikedProjectName
    

    完成后就会新建一个名为YouLikedProjectName的文件夹,里面有Android和iOS版本的项目源码以及各种依赖库文件

    在这个过程中就有坑了,注意

    1. 一些模块地址被墙,下载不到,就需要proxy了
      shadowsocks开启全局模式,并不代表terminal也可以走代理。另外,terminal只能设置http代理,无法走https;而且,ping命令是无法确认是否走代理了,只能用curl或wget来确认。同样,Android studio也需要手动设置代理,否则无法下载依赖的包。怎么样,坑多么?干的漂亮。
    1. 下载cocoapods慢的要死,几十分钟后还来一个失败
      直接ctrl+c中断,不用等了,执行下面的命令

      $ brew install cocoapods 
      $ cd ios
      $ pod install --repo-update
      

      懂了么,用brew来装cocoapods,然后到项目目录里更新。参考1 参考2

      如果中途遇到SDK “iphoneos” cannot be located这样的错误,参照来指定command路径,然后重新pod install --repo-update就搞定了。

    启动项目-Android

    1. 映射端口
    adb reverse tcp:8081 tcp:8081
    

    这样就可以把手机和电脑的8081端口映射在一起。

    1. 启动监听服务
    react-native start
    
    1. 运行项目
    react-native run-android
    

    如果遇到react-native No bundle URL,参考下面iOS的解决方案。

    启动项目-iOS

    • 注意一定先运行react-native start,启动监听服务。然后再运行react-native run-ios
    • 如果命令行启动失败,那就只能开xcode来编译了。注意,必须打开后缀名是xcworkspace的文件,如果只打开xcodeproj,编译可能会报错:Xcode build error linker command failed with exit code 1
    • 如果提示找不到一些头文件,比如:
    Error building: 'React/RCTBridgeDelegate.h' file not found; 'React/RCTBridge.h' file not found
    Exception: 'React/RCTLog.h' file not found
    

    那么去修改Header Search Paths,增加:
    $(SRCROOT)/Pods/Headers/Public
    $(SRCROOT)/…/node_modules/react-native/React

    注意,要选择递归查找。
    在这里插入图片描述

    • 启动成功后,模拟器开启,上传应用后,打开发现react-native No bundle URL present
      在这里插入图片描述
      检查两个地方:
    1. 是否执行过react-native start
    2. 是否开启了代理(需要关闭
      确认两个都没问题,在模拟器中删除应用,然后清理xcode编译后文件:Product——Clean Build Folder,再重新Build,看到如下界面,完美了。
      在这里插入图片描述
    展开全文
  • 今天心血来潮,看到一篇文章,运行react native android app 听说非常火,就弄了一下,结果弄了一下午,其实挺简单的,下面列出我中间遇到的一些坑。 具体有以下几个步骤 1.安装Homebrew 2.Node.js安装 3.安装...

    今天心血来潮,看到一篇文章,运行react native android app 听说非常火,就弄了一下,结果弄了一下午,其实挺简单的,下面列出我中间遇到的一些坑。

    具体有以下几个步骤

    1.安装Homebrew

    2.Node.js安装

    3.安装watchman和flow

    4.安装React Native

    5.创建React Native 应用,运行。

    具体问题出现在Node.js安装上面,也就是步骤2上

    1.第一步安装 nvm,nvm是什么鬼我也不知道

       语句:brew install nvm

       mac 进入环境变量的方法: open .bash_profile

       安装之后要配置环境变量:#this loads nvm(路径随便写,你找得到就行

        export NVM_DIR="/Users/zhangruofei/.nvm"                       
        [ -s "$NVM_DIR/nvm.sh" ] && . "$NVM_DIR/nvm.sh"

    2.安装node.js

       语句:nvm install node && nvm alias default node   

    3.安装node.js之后,配置环境变量(重点

    mac 进入环境变量的方法: open .bash_profile

       首先,要配置node.js 的环境变量

      语句:export PATH=$PATH:/Users/zhangruofei/.nvm/versions/node/v6.7.0/bin   (这个是我的安装路径,你自己的= =自己找)

      这些都弄完之后,检验一下:

      语句:node -v 

      语句:npm -v

    4.安装完React Native  需要配置sdk的环境变量(重点

    mac 进入环境变量的方法: open .bash_profile

     语句:export ANDROID_HOME=/Users/zhangruofei/Library/Android/sdk     
                export PATH=${PATH}:/Users/zhangruofei/Library/Android/sdk/tools:/Users/zhangruofei/Library/Android/sdk/platform-tools

    5.运行的时候要插着手机。。还有运行好的程序怎么修改 我特么还不知道呢!知道了在更新。

       

       


    展开全文
  • 一、配置iOS开发环境①基本环境需求1.先安装Homebrew:用于安装NodeJS和其他工具必须的$ /usr/bin/ruby -e "$(curl -fsSL ...如上图,出现“Press RETURN to continue or any other key

    一、配置iOS开发环境

    ①基本环境需求

    1.先安装Homebrew:用于安装NodeJS和其他工具必须的

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

    这里写图片描述
    如上图,出现“Press RETURN to continue or any other key to abort”的时候记得按“回车”,看到 ==>Installation successful!
    就表示安装成功了。

    2.使用Homebrew 安装 Node.js

    React Native 需要 NodeJS 4.0或更高版本,Homebrew的Node默认包是6.0版本的,所以应该不成问题

    $ brew install node

    3.安装React Native 命令行工具

    命令行工具可以轻松创建和初始化工程

    $ npm install -g react-native-cli

    如果出现错误 :EACCES: permission denied,使用命令: sudo npm install -g react-native-cli.

    4.Xcode(这个就不说了,使用Xcode 7.0或以上版本,Xcode同时会安装好git)

    ②建议安装

    1.Watchman

    Watchman是Facebook开发的一个检测文件系统变化的工具。

    $ brew install watchman

    2.Flow

    静态类型检查工具

    $ brew install flow

    3. Nuclide

    Facebook推出的一款React Native集成开发环境(IDE)

    注:推荐定期运行brew update && brew upgrade使上述程序保持为最新版本

    ③快速开始

    $ react-native init AwesomeProject 
    
    $ cd AwesomeProject 
    
    $ react-native run-ios

    也可以用Xcode打开ios/AwesomeProject.xcodeproj 并点击Run按钮

    注:由于众所周知的原因,react-native命令行从npm官方源拖代码时会遇上麻烦。请将
    npm仓库源替换成淘宝的:

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

    二、配置Android开发环境

    ①.安装Android Studio

    Android Studio需要 Java Development Kit[JDK] 1.8 或者 更高版本,你可以使用javac -version命令
    看看你的版本是多少,如果没有JDK环境,从这里下载

    Android Studio 将提供Android SDK和模拟器用于运行和测试 React Native App

    推荐从AndroidDevTools下载。

    你需要自定义配置你的安装:

    • 选择Custom安装模式

    图片名称
    * 勾选PerformanceAndroid Virtual Device
    这里写图片描述
    * 安装完成后, 在Android Studio欢迎页面选择Configure | SDK Manager
    这里写图片描述
    * 在SDK Platforms窗口中,选择Show Package Details,在Android 6.0 (Marshmallow)下,确保勾选
    Google APIs, Intel x86 Atom System Image
    Intel x86 Atom_64 System Image
    Google APIs Intel x86 Atom_64 System Image
    这里写图片描述
    * 在SDK Tools窗口中,选择Show Package Details,在Android SDK Build Tools下,确保
    Android SDK Build Tools被勾选。
    这里写图片描述

    ②.设置ANDROID_HOME 环境变量

    确保 ANDROID_HOME环境变量指向存在的Android SDK。 在~/.bashrc或者~/bash_profile添加:

    # 如果你是通过Homebrew安装SDK的,则加入下列路径
    export ANDROID_HOME=/usr/local/opt/android-sdk
    
    # 否则可能是(当然具体视你把SDK放在哪):
    export ANDROID_HOME=~/Library/Android/sdk

    建议把Android Tools Directory 也加入到 Path,也是在~/.bash 或者 ~/.bash_profile中:

    # Your exact string here may be different. 
    PATH="~/Library/Android/sdk/tools:~/Library/Android/sdk/platform-tools:${PATH}" export PATH

    ③故障解决

    1.安装Android Studio后,Virtual Device 不会被创建

    这是一个在某些Android Studio版本中的已知bug,尽管你在安装完后选择了它,你
    会在安装的最后看到:

    Creating Android virtual device 
    Unable to create a virtual device: Unable to create Android virtual device

    假如你看到这个,运行android avd来手动创建vitual device
    这里写图片描述
    然后在AVD Manager 窗口选择新的设备点击Start...

    2.脚本命令响应异常

    如果你遇到:

    Execution failed for task ':app:installDebug'. 
    com.android.builder.testing.api.DeviceException: 
    com.android.ddmlib.ShellCommandUnresponsiveException

    试着在<project-name>/android/build.gradle把你的Cradle 版本降级到1.2.3 (https://github.com/facebook/react-native/issues/2720)

    ④快速开始

    react-native init AwesomeProject 
    
    cd AwesomeProject 
    
    react-native run-android
    展开全文
  • 前言React Native开发环境可以搭建Windows平台或者Mac...当然,win平台你无法查看iOS运行效果,此我显示的是在Mac下面搭建React Native环境,并且创建第一个Hello World!项目。环境搭建起点在mac系统环境下搭
  • 这里记录一下在Mac系统下搭建React Native开发环境的过程: 1. 安装HomeBrew:1/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)" 安装完后如下所...
  • 序言此对于React Native开发环境的配置不做赘述,直接正常环境下进行开发/运行,如果没有配置好可以查看React Native 官方文档,此介绍常见的问题开发工具js工具: VSCode 建议使用,性能好,比较精简,Mac...
  • Homebrew, Mac系统的包管理器,用于安装NodeJS和一些其他必需的工具软件。 /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)" homebrew安装软件时可能会...
  • mac 下安装react native

    2017-04-14 21:41:33
    react native安装以及创建工程 1、Homebrew 可以傻瓜安装node,watchman和flow的软件管理工具。 安装命令:$ ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/uninstall)"2、 ...
  • android设置上运行React Native应用
  • 1.安装nodejshttps://...安装React Native npm install -g react-native-cli3.安装 watchman (我没有安装时,总是执行失败)https://facebook.github.io/watchman/brew install watchman4.创建项目(1)react-n...
  • mac端可视化调试react或者reactnative工具,可以调试redux应用状态
  • #一波命令行全部搞定,连Android Studio都不用装,推荐使用Visual Studio Code作为IDE #设置代理,谷歌的东西很多被墙,你懂的 set ...set socks5_proxy='socks5://127.0.0.1:1...
  • 1、win10开发的reactnative项目在mac上无法运行 删除node_modules文件 再npm install  再react-native upgrade 根据package.json配置的RN版本,更新RN环境代码 更新ios部分就行 再从新配置项目插件 ...
  • React Native Mac环境搭建

    2016-06-03 13:44:37
    这里只介绍Mac 的环境搭建,其他环境搭建请参考: http://facebook.github.io/react-native/docs/getting-started.html 。 上面有所有环境搭建。1、安装Homebrew安装Homebrew是为安装Node.js做前提准备。 安装...
  • 用web storm 运行react-native 工程时,出错:xcrun: error: unable to find utility “instruments”, not a developer tool or in PATH 解决办法: 解决方法: 终端执行如下命令 sudo xcode-select -s /Appli
  • React Native Mac安装

    2017-10-16 14:01:18
    React Native Mac安装 1、安装软件Homebrew 可以使用Homebrew来安装需要软件 $ /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)" 2、安装NodeJS $ brew ...
  • 1:此问题是因为Npm install 运行出错导致的   最好是输入sudo npm install 进行实例化操作
  • npm install -g react-native-cli安装react-native 命令行工具react-native –help可以查看命令行工具支持的命令接下来安装Xcode 之后安装Android Studio然后初始化一个应用react-native init FirstAp
1 2 3 4 5 ... 20
收藏数 3,607
精华内容 1,442
热门标签
关键字:

在mac上运行reactnative