我们一起学React Native：环境配置

Posted lijianming180

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了我们一起学React Native：环境配置相关的知识，希望对你有一定的参考价值。

最近想在项目中实现跨平台，对比一下主流的实现方式，选用了React Native。参考网上的教程，对于一直都是原生移动端开发，对前端的知识不是很了解的，感觉入门不是特别简单。于是打算把学习React Native的过程记录下来。

环境配置

基本参考React Native中文网搭建开发环境教程

搭建开发环境

安装流程就不详细写了，毕竟平台不同，系统原有软件的版本也不同，就算再详细下出来，也很难涉及全，可参考价值不大，况且React Native中文网写得很全面了。

我自己homebrew，Node，android Studio之前都安装过了，基本不需要改动，就可以直接使用。网络方面，使用梯子，也一切顺利。

基本流程

  1. 安装Homebrew
  2. 用homebrew安装node
  3. 安装Yarn，react-native-cli
  4. 安装Xcode，macos都有
  5. 安装Watchman
  6. 安装Android Studio，Android SDK，Java环境，模拟器
  7. 安装webstorm开发工具

输出版本号判断是否安装成功

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
?  ~ brew -v
Homebrew 1.6.0
Homebrew/homebrew-core (git revision 47aeb6; last commit 2018-04-12)

?  ~ node -v
v8.11.1

?  ~ xcodebuild -version
Xcode 9.3
Build version 9E145

?  ~ watchman -v
4.9.0

?  ~ java -v
Unrecognized option: -v
Error: Could not create the Java Virtual Machine.
Error: A fatal exception has occurred. Program will exit.

?  ~ java -version
java version "1.8.0_112"
Java(TM) SE Runtime Environment (build 1.8.0_112-b16)
Java HotSpot(TM) 64-Bit Server VM (build 25.112-b16, mixed mode)

编译项目测试运行环境

1
2
3
4
5
6
7
 创建名称为AwesomeProject的项目
?  ~ react-native init AwesomeProject
?  ~ cd AwesomeProject
 运行Android 项目
?  ~ react-native run-android
 运行ios 项目
?  ~ react-native run-ios

运行效果

看到Welcome to React Native，表示搭建开发环境，创建，运行React Native应用完成。为啥不是显示hello world呢！！！

技术图片

错误点

  1. Error: Your Xcode (8.2) is too outdated.

    由于刚刚升级了Mac OS为10.3，Xcode没有更新到，现在提示该错误，直接在App Store升级Xcode就可以了。

  2. warni 大专栏  我们一起学React Native(一)：环境配置ng You are using Node “7.7.1” which is not supported and may encounter bugs or unexpected behavior. Yarn supports the following semver range: “^4.8.0 || ^5.7.0 || ^6.2.2 || ^8.0.0”

    Node版本不符合，有warning提示，那就重新Node版本吧

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
     查找有效的node版本，打钩表示已经安装上的
    ?  ~ brew search node
    ==> Searching local taps...
    node ?             libbitcoin-node    node@4             nodeenv
    node@8 ?           llnode             node@6             nodenv
    leafnode           node-build         nodebrew
     断开当前版本
    ?  ~ brew unlink node
    # 安装node8版本
    ?  ~ brew install node@8
    # 连接新安装的node8版本，后续切换也是通过这种方式
    ?  ~ brew link node@8
    # 显示当前版本是否正确
    ?  ~ node -version

端口占用出错

  1. unable to load script from assets ‘index.android bundle’ ,make sure your bundle is packaged correctly or youu’re runing a packager server

    后来发现，不需要生成index.android.bundle文件也可以解决该问题，具体看错误6

    • 创建assets文件

      1
      ?  AwesomeProject mkdir android/app/src/main/assets

    • 生成index.android.bundle文件

      1
      ?  AwesomeProject react-native bundle --platform android --dev false --entry-file index.js --bundle-output android/app/src/main/assets/index.android.bundle --assets-dest android/app/src/main/res/

    • 重新编译运行

      1
      ?  AwesomeProject react-native run-android

  2. The development server returned response error code:404

    该问题与上面的，应该是有联系的。上面的问题解决后，点开菜单，设置Enable Hot Reloadding出现了错误，提示如下。React Native怎么问题那么多？？？回想上一周创建项目的时候，都没有这些问题，也没有去创建index.android.bundle文件，一切正常。

    一直发现不知道什么问题，就先忽略不去管它，然后，修改App.js的代码，发现修改后，重新运行，一点效果都没有？？？仔细看发现，运行的时候，终端出现了下面的错误。

  3. js server not recognized, continuing with build

    该问题的出现，是因为端口被占用了，默认是用8081的端口。

    1
    2
    3
    4
    5
    6
    # 查看端口占用
    ? lsof -i:8081
    COMMAND   PID        USER   FD   TYPE             DEVICE SIZE/OFF NODE NAME
    node    58043 guidongyuan   20u  IPv6 0x4c86dd8abf88c407      0t0  TCP *:sunproxyadmin (LISTEN)、
    # kill掉占用的进程
    ?  ~ kill -9 58043

    重新编译运行就可以了

    通过该方式修复了问题错误4和5后，发现把错误3中为了修复错误新增的文件删除掉，也不会出错。看来都是端口的问题。

以上是关于我们一起学React Native：环境配置的主要内容，如果未能解决你的问题，请参考以下文章

Mac配置React Native开发环境

游戏环境配置:React Native 开发环境配置 For Android

快来跟我一起学 React（Day4）

快来跟我一起学 React（Day4）

react native 学习之 native modules

React Native 之极光推送jpush-react-native 手把手配置