前言

最近一直在做 app 方面的开发,目前来说最常用的还是uniapp,心里多少有点不太想使用这个多端开发,编辑器也不顺手,想起了react-nativeflutter,相比起来熟悉 react 的我选择了前者。

  • 开发平台
    macOS Big Sur
  • 系统版本
    11.2
  • 芯片
    intel,2017 款 8+256 (配置着实有点低)

配置环境

说起配置环境,刚开始也不慌,毕竟作为开发配置过的环境已经很多了,但遇到了这个react-native不得不说一下。这是我配置 React-Native 环境的第三次吧,前两次不用说(失败了,每次都还耗费了两三个小时至少),这次也是耗费了三四个小时吧,勉强算是成功。心里也是松了口气,万事开头难,开头成功了相当于已经完成了 90%。

环境依赖安装

基本配置如下:

Snipaste_2022-07-11_11-17-48.png
附:我这里 pod -v 报错是因为使用的命令不对,改成 pod –version 就可以查看版本了。

Snipaste_2022-07-11_11-19-11.png
官网的说法:

Snipaste_2022-07-11_13-52-04.png

  • node 和 npm 的安装就不详说了,网上也有很多参考,重点说说下面的。
  • 关于 yarn:
    npm install -g yarn
  • react-native:
    yarn add react-native --exact
  • brew:
    brew 的安装可以参考这篇文章
  • watchman:
    brew install watchman
  • pod(cocoapods):
    js brew install cocoapods
    当以上这些安装好以及相应的版本号都能出现后,基本的环境搭建算是 OK 了,接下来就是创建项目和开发工具的搭建以及配置。(创建项目出错耗费了我好久)

项目创建

  • 使用 npx react-native 创建项目
    js npx react-native init testapp
    看起来一切顺利:

Snipaste_2022-07-11_14-06-26.png
这个过程可能有点长(等了将近七八分钟):

Snipaste_2022-07-11_14-10-31.png
估计就是连接不上外网,下载这个一般开个代理会比较快点,也可以运行下这个:

1.  git config --global --unset http.proxy
2.  git config --global --unset https.proxy

设置完成后再重新创建项目试试,没啥报错的话就 OK 了,可以直接到安装软件那一步了。

但是我的本地还是报这个错无法解决,最后我查了好久,试试 init 创建项目(如下):

react-native init testapp

结果呢,又出现了另一个错误:

Snipaste_2022-07-11_11-20-31.png
此刻都有点想放弃了,配置个环境真麻烦。。。

此时的项目结构是这样:

Snipaste_2022-07-11_13-16-08.png
然后各种百度、google 一大堆,有如下的方法:

  • 将 react-native 更新到最新
    yarn add react-native --exact
    结果还是一样。。。
  • 指定项目的版本号:(试了好几次不行,最后花了好长时间,用了一个低的版本创建,结果就成功了!!!应该算是成功了吧),至少不报刚才的错误了。
    js react-native init testapp --version 0.44.0
    Snipaste_2022-07-11_13-14-02.png

效果如下:(出来了运行命令,应该是没多大问题了)

Snipaste_2022-07-11_13-14-34.png

安装软件

  • 上次安装了Android Studio,过程比较麻烦,后续环境没弄成功还被我卸载了。所以决定这次用 ios 的 Xcode 吧,反正也就是看看模拟器的效果。
  • 在 App Store 搜索 xcode 安装,安装的时候提示了我这个,特意看了下系统的版本要求:

Snipaste_2022-07-11_13-20-39.png
发现我自己的版本过低,万一安装出问题了重新下载比较麻烦(毕竟 10 多个 g):

Snipaste_2022-07-11_13-20-16.png

  • 官网看看,下载之前的版本:

    这里可以看到与自己电脑相匹配版本的 xcode:

Snipaste_2022-07-11_13-22-31.png

  • 找到自己电脑匹配的进行下载,下载的时候还要登录 AppleID:

Snipaste_2022-07-11_13-24-38.png

Snipaste_2022-07-11_13-25-09.png
这个过程可能有点久,网速好点的话可能会快点。

Snipaste_2022-07-11_13-26-21.png

  • 大概半来个小时吧,下载完成(主要看网速),完成后进行解压安装,解压也有点久,如果版本匹配的话更推荐在 App Store 下载,因为解压太久了,我差不多花了半小时才解压完。

Snipaste_2022-07-11_14-44-45.png

Snipaste_2022-07-11_14-48-16.png

解压完成后:(可能是把大多数的 ios 和 tv 的 jdk 都下载了,有点大吧)

Snipaste_2022-07-11_15-54-36.png

  • 项目的目录结构是这样:(看到有个 index.ios.js 和 index.android.js 感觉不太妙,因为老的版本有个两个文件,新版本的话只有 index.js)

Snipaste_2022-07-11_16-02-19.png

  • Xcode 安装好后运行项目中的 ios 目录,选择好模拟器的型号后,点击这个三角形运行。

Snipaste_2022-07-11_16-05-15.png
如图所示:(等待开机)

468401657525269_.pic.jpg
开机后,又等了一会,也没有出现想象中欢迎的界面:(白白的啥也没有,应该是出问题了)

Snipaste_2022-07-11_15-46-44.png

  • 重新建一个高点的版本项目试试:(这次不指定版本号了,感觉可能又要出其它问题)
  • 首先重新安装了下 cocoapods(一直是在安装 pods 依赖出的问题)
    js sudo gem install cocoapods
    关于 cocoapods 的问题可以参考这个链接
    Snipaste_2022-07-11_16-15-58.png
  • 重新建项目
    npx react-native init AwesomeProject
  • 又出现错误

Snipaste_2022-07-11_16-14-12.png

  • 这次按提示安装 pods(前几次也这样试了没用,这次在上面重新安装了执行)
cd ./AwesmeProject/ios && pod install

Snipaste_2022-07-11_16-37-57.png
等了一会儿,好像也没有错误了。

Snipaste_2022-07-11_16-38-23.png

运行项目

  • 这次的目录结构不一样

Snipaste_2022-07-11_16-38-55.png
按照 package.json 中的命令运行 ios 项目

  • 用 Xcode 打开 ios 目录,运行后在建立索引,可能需要点时间,左侧是 ios 项目目录。

Snipaste_2022-07-11_16-48-37.png

  • 模拟器效果(可以滑到第二页看到正在安装的 app)

Snipaste_2022-07-11_17-03-54.png

  • 等到安装完成,打开就能看到新建的项目了,这样就算是成功了。

Snipaste_2022-07-11_17-03-32.png

如果以上帮到你的话,点个赞吧!