秋雨
首页
  • HTML
  • CSS
  • JavaScript
设计模式
webpack
  • 前端常识
  • ES
  • React
  • Redux
  • ReactRouter
  • 事件循环
  • 浏览器渲染流程
  • Vue项目性能优化
  • Vue
  • App
Github
首页
  • HTML
  • CSS
  • JavaScript
设计模式
webpack
  • 前端常识
  • ES
  • React
  • Redux
  • ReactRouter
  • 事件循环
  • 浏览器渲染流程
  • Vue项目性能优化
  • Vue
  • App
Github
  • APP
  • React-Native

React-Native环境配置

其实正常按照官方的文档来配置基本不会有什么问题。国内更多的是网络问题,解决一下就好了。这里只记录下我遇到的问题。

问题

✖ Installing Ruby Gems
error Fetching gem metadata from https://rubygems.org/........
Resolving dependencies...
Fetching base64 0.2.0
Installing base64 0.2.0
Fetching nkf 0.2.0
Installing nkf 0.2.0 with native extensions
Gem::Ext::BuildError: ERROR: Failed to build gem native extension.

current directory:
/Users/lsz/helloReactNative/vendor/bundle/ruby/2.6.0/gems/nkf-0.2.0/ext/nkf
/System/Library/Frameworks/Ruby.framework/Versions/2.6/usr/bin/ruby -I
/System/Library/Frameworks/Ruby.framework/Versions/2.6/usr/lib/ruby/2.6.0 -r
./siteconf20241203-50275-k9lxff.rb extconf.rb
creating Makefile

current directory:
/Users/lsz/helloReactNative/vendor/bundle/ruby/2.6.0/gems/nkf-0.2.0/ext/nkf
make "DESTDIR=" clean

current directory:
/Users/lsz/helloReactNative/vendor/bundle/ruby/2.6.0/gems/nkf-0.2.0/ext/nkf
make "DESTDIR="
make: *** No rule to make target
`/Applications/Xcode.app/Contents/Developer/Platforms/MacOSX.platform/Developer/SDKs/MacOSX15.1.sdk/System/Library/Frameworks/Ruby.framework/Versions/2.6/usr/include/ruby-2.6.0/universal-darwin23/ruby/config.h',
needed by `nkf.o'.  Stop.

make failed, exit code 2

Gem files will remain installed in
/Users/lsz/helloReactNative/vendor/bundle/ruby/2.6.0/gems/nkf-0.2.0 for
inspection.
Results logged to
/Users/lsz/helloReactNative/vendor/bundle/ruby/2.6.0/extensions/universal-darwin-23/2.6.0/nkf-0.2.0/gem_make.out

An error occurred while installing nkf (0.2.0), and Bundler cannot continue.
Make sure that `gem install nkf -v '0.2.0' --source 'https://rubygems.org/'`
succeeds before bundling.

In Gemfile:
  cocoapods was resolved to 1.15.2, which depends on
    xcodeproj was resolved to 1.25.1, which depends on
      CFPropertyList was resolved to 3.0.7, which depends on
        nkf
error Installing Cocoapods failed. This doesn't affect project initialization and you can safely proceed. However, you will need to install Cocoapods manually when running iOS, follow additional steps in "Run instructions for iOS" section.

Error: Looks like your iOS environment is not properly set. Please go to https://reactnative.dev/docs/environment-setup?os=macos&platform=ios&guide=native and follow the React Native CLI QuickStart guide for macOS and iOS.

info 💡 To enable automatic CocoaPods installation when building for iOS you can create react-native.config.js with automaticPodsInstallation field.
For more details, see https://github.com/react-native-community/cli/blob/main/docs/projects.md#projectiosautomaticpodsinstallation
# If you come from bash you might have to change your $PATH.

✔ Initializing Git repository


  Run instructions for Android:
    • Have an Android emulator running (quickest way to get started), or a device connected.
    • cd "/Users/lsz/helloReactNative" && npx react-native run-android

  Run instructions for iOS:
    • cd "/Users/lsz/helloReactNative"

    • npx react-native run-ios
    - or -
    • Open helloReactNative/ios/helloReactNative.xcodeproj in Xcode or run "xed -b ios"
    • Hit the Run button

  Run instructions for macOS:
    • See https://aka.ms/ReactNativeGuideMacOS for the latest up-to-date instructions.

原因

因为在mac电脑中内置了ruby,但是它的版本太低了,下面是我的电脑里面的版本。

ruby -v

ruby 2.6.10p210 (2022-04-12 revision 67958) [universal.arm64e-darwin23]

解决办法

brew install rbenv ruby-build

rbenv install --list //查看所有可用版本

rbenv install 3.3.6

rbenv rehash

安装完成后会出现rbenv version和ruby -v版本不一致。

通过 vim ~/.zshrc 添加 export PATH="$HOME/.rbenv/bin:$PATH" eval "$(rbenv init -)"

然后执行 source ~/.zshrc

最后一个问题

react-native官网上推荐 expo 来创建项目。这个看个人喜好和具体应用场景。 想自己一步步来的建议看这个文章

最后更新:
贡献者: qiuyulc
Prev
APP