• 前言
• 环境搭建
  • 环境说明
  • 安装
  • npm代理
• UI设计

前言

本人开发react多年, 撸个react native游戏玩玩, 本文记录开发过程.

环境搭建

按照官网来, 试了react-native几个版本(0.72.9, 0.73.0, 0.73.1, 0.73.2), 不是npm的依赖问题, 就是Ruby Gem 的 Bundler依赖问题,

搞不清楚到底是依赖本身的问题还是墙内的网络问题, 有时挂了命令行全局代理不行, 再给git挂上又行了.

0.73.1, 0.73.2有共通的问题, github上有人提了issue, 维护者明确回复会在0.73.3上修复.

整个过程挺折腾的, 难怪网上有人戏称开发RN2年多了, 配置环境依然靠运气.只记录成功的这次. react-native版本为0.73.3.

环境说明

我是mac M2, 目标运行在 iphone 或者 ipad上.

电脑里的node为lts的v20.11.0, 安装的react-native版本为0.73.3

安装

按照官网来, 安装几个必要的先, 有的直接略过

# > 16的版本
brew install node
# Watchman由 Facebook 提供的监视文件系统变更的工具。安装此工具可以提高开发时的性能（packager 可以快速捕捉文件的变化从而实现实时刷新）。
brew install watchman
# CocoaPods是用 Ruby 编写的包管理器（可以理解为针对 iOS 的 npm）
brew install cocoapods
# init项目
npx react-native@0.73.3 init testProject --version  0.73.3

npm代理

npx的时候没成功, 显示timeout, 我这里通过.npmrc 文件设置了下代理. 你可以直接编辑 npm 的配置文件 .npmrc。在用户目录下（例如 ~/.npmrc）或项目目录下创建或编辑 .npmrc 文件，添加如下内容:

proxy=socks5://127.0.0.1:1080
https-proxy=socks5://127.0.0.1:1080

继续再来一遍npx react-native init testProject

install CocoPods 选no, 我们提前已经安装了, 不然一直会卡在这.

安装完毕截图如下:

之后无论是npx react-native run-ios 还是用xCode启testProject.xcodeproj都失败, 原因是cocoapods的依赖我没装成功, 需要按照他的截图来安装:

cd ios
bundle install
bundle exec pod install

如果很慢, 挂git代理 or 全局命令行代理

# 挂代理
git config --global http.proxy socks5://127.0.0.1:1080
git config --global https.proxy socks5://127.0.0.1:1080
# 查看git代理
git config --global --list

# 或者命令行挂代理
export all_proxy=socks5://127.0.0.1:1080

都成功了之后

UI设计

作为一名前端开发, 秉承UI不确定, 代码不开始原则.(当然是不可能的)

我去搜了一下ios的设计标准, 然后发现有现成的Figma标准,

俗话说:

毕竟之前