react native 项目环境搭建

react native 项目环境搭建

除了官方文档外还需要踩的坑

react native官网-环境搭建官方指导

  1. node工具链安装

    1
    2
    3
    4
    5
    6
    7
    $ brew install node
    $ brew install watchman
    # 使用nrm工具切换淘宝源
    $ npx nrm use taobao
    # 如果之后需要切换回官方源可使用
    $ npx nrm use npm
    $ npm install -g yarn

    注意事项:

    • brew的安装和换源:tuna官方文档
    • watchman安装中brew会多次报找不到模块的错误Error: No such file or directory @ rb_sysopen,根据brew的保存安装对应模块即可,可能存在2~3个模块的缺失
  2. ruby包管理工具rvm安装:请检查ruby --version,版本建议>2.6.0 & <=3.0.0,如果版本过高或过低建议下载rvm进行ruby版本的管理和替换

    1
    2
    3
    4
    5
    6
    # 安装gpg公钥工具
    $ brew install gnupg
    # 安装mpapis公钥
    $ gpg --keyserver hkp://pgp.mit.edu --recv-keys 409B6B1796C275462A1703113804BB82D39DC0E3 7D2BAF1CF37B13E2069D6956105BD0E739499BDB
    # 安装最新版本Ruby的rvm
    $ \curl -sSL https://get.rvm.io | bash -s stable --ruby

    注意事项:

    • 使用curl命令需要在终端挂梯子。否则会报SSL443 (43)等各种错误,没有条件的请自行寻找rvm的安装方式。

      1
      2
      # ip和端口请关注自己服务器设置中inbounds的监听IP和端口。注意http和socks协议端口的不同
      $ export https_proxy=http://127.0.0.1:1087 http_proxy=http://127.0.0.1:1087 all_proxy=socks5://127.0.0.1:1080
  3. ios工具链安装

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    # gem换源
    $ gem sources --add https://gems.ruby-china.com/ --remove https://rubygems.org/
    $ gem sources -l # 确保只有 gems.ruby-china.com
    https://gems.ruby-china.com
    # cocoapods安装
    $ sudo gem install cocoapods安装
    # cocoapods安装换源
    $ pod repo remove master
    $ pod repo add master https://mirrors.tuna.tsinghua.edu.cn/git/CocoaPods/Specs.git
    $ pod repo update

    注意事项:

  4. 编译和运行

    1
    2
    3
    4
    5
    6
    7
    # 详细参数解释参考https://reactnative.cn/docs/environment-setup
    npx react-native init AwesomeTSProject --template react-native-template-typescript
    cd AwesomeProject
    cd ios
    open -e podFile # 在第一行加上 source 'https://mirrors.tuna.tsinghua.edu.cn/git/CocoaPods/Specs.git'
    cd ..
    yarn ios
    • 按照上述过程安装制定版本的ruby和gem后应当能够无报错正常搭建应用,第一次构建的等待时间可能较长(2~5分钟)
    • 如果正常打开模拟器但终端出现大量关于gem模块版本的报错或者Failed to install CocoaPods template等报错,请检查是否正确按照上述步骤中的官方文档更换ruby gem和CocoaPods源

title:react native 项目环境搭建

author:Anne416wu

link:https://www.annewqx.top/posts/30803/

publish time:2022-01-10

update time:2022-07-25


 

评论

Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×