iOS进阶学习——React-Native-环境搭建-run-it

官方参考

  1. react-native github
  2. react-native 中文文档
  3. node.js
  4. nvm
  5. watchman
  6. flow

环境搭建

Node.js安装

  1. nvm istall
    • 输入命令curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.31.0/install.sh | bash
    • 如果你希望卸载nvm,你可以输入命令$ npm uninstall -g a_module
  2. 输入命令nvm install node && nvm
  3. 使nvm生效:. ~/.nvm/nvm.sh
  4. 安装Node.jsnvm install node && nvm alias default node

watchman安装

  1. brew install watchman

    flow

    brew install flow

快速使用React Native

  1. 安装React Native
    • npm install -g react-native-cli
  2. 创建React Native工程
    • 进入你常用的workspace,输入命令react-native init AwesomeProject
    • 稍等会自动帮你创建好工程,大概是这样:
      图片
  3. 打开iOS文件夹,发现里面是熟悉的常规工程目录,打开工程,在模拟器上运行(稍后会说明如何在真机运行),效果如下

    图片

  4. 真机运行

    • 观察项目AppDelegate.m你可以发现didFinishLaunchingWithOptions中有这样一句

      1
      jsCodeLocation = [NSURL URLWithString:@"http://localhost:8081/index.ios.bundle?platform=ios&dev=true"];

      所以简单的来说,要保证你的真机和mac在同一个网络,将localhost换成mac的IP地址

可能遇到的问题

react-native命令行慢

老问题了……替换npm仓库源,换成国内的源

1
2
npm config set registry https://registry.npm.taobao.org
npm config set disturl https://npm.taobao.org/dist

watchman无法启动

  1. 命令台报错:ERROR watchman–no-pretty get-sockname returned with exit code null dyld: Library not loaded: /usr/local/lib/libpcre.1.dylib
    Referenced from: /usr/local/bin/watchman
    Reason: image not found
  2. 解决
    brew uninstall watchman
    brew install –HEAD watchman

有什么问题都可以在博文后面留言,或者微博上私信我,或者邮件我 coderfish@163.com

博主是 iOS 妹子一枚。

希望大家一起进步。

我的微博:小鱼周凌宇

小鱼周凌宇 wechat
欢迎订阅我的个人公众号~╮(╯▽╰)╭
坚持原创技术分享,支持萌妹子,您的支持将鼓励我继续创作!