RN(0.67)接入现有swift项目及常见问题

一、创建RN新项目

1、创建新项目
在安装好RN环境之后，执行如下命令

npx react-native init xxx项目名

找到项目的ios目录，将现有的swift项目拷贝到ios目录中

2、修改podfile文件

最新的RN项目中的podfile文件可以在下面这个链接上查看：

RN集成Pod的版本

参考该文件并对自己的Podfile文件进行修改，如：

require_relative '../node_modules/react-native/scripts/react_native_pods'
require_relative '../node_modules/@react-native-community/cli-platform-ios/native_modules'

platform :ios, '11.0'
target 'SFDY_SHIPPER' do

pod 'BSText'
pod 'YYImage',:modular_headers => true                 #富文本
pod 'WechatOpenSDK' #微信SDK
  config = use_native_modules!

  use_react_native!(
    :path => config[:reactNativePath],
    # to enable hermes on iOS, change `false` to `true` and then install pods
    :hermes_enabled => false
  )

  # Enables Flipper.
  #
  # Note that if you have use_frameworks! enabled, Flipper will not work and
  # you should disable the next line.
  use_flipper!()

  post_install do |installer|
    react_native_post_install(installer)
    __apply_Xcode_12_5_M1_post_install_workaround(installer)
  end
end

进入到ios目录下，执行pod install命令安装项目所需要的库

3、加载
在合适的地方加载bundle文件测试
比如可以放在appdelegate文件

 func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {  
            // 测试RN项目
            
            let moduleName: String = "sfdy_shipper_rn"
            let jsCodeLocation:NSURL
            jsCodeLocation = NSURL(string:"http://192.168.30.39:8081/index.bundle?platform=ios")!
        
            let rootView = RCTRootView(bundleURL: jsCodeLocation as URL, moduleName: moduleName, initialProperties: nil, launchOptions: nil)
            rootView.backgroundColor = UIColor.systemPink
            let rootViewController = UIViewController()
            rootViewController.view = rootView
    
            window = UIWindow(frame: UIScreen.main.bounds)
            window?.rootViewController = rootViewController
            window?.makeKeyAndVisible()
            
            return true
        }

4、第一个页面

二、常见问题

问题1：

RCTStatusBarManager module requires that the UIViewControllerBasedStatusBarAppearance key in the Info.plist is set to NO

解决：
在info.plist中，添加View controller-based status bar appearance并设置为NO

问题2：

[!] /bin/bash -c 
set -e
#!/bin/bash
set -e
 
PLATFORM_NAME="${PLATFORM_NAME:-iphoneos}"
CURRENT_ARCH="${CURRENT_ARCH}"
 
......(省略)
 
xcrun: error: SDK "iphoneos" cannot be located
xcrun: error: SDK "iphoneos" cannot be located
xcrun: error: SDK "iphoneos" cannot be located
xcrun: error: unable to lookup item 'Path' in SDK 'iphoneos'
/Users/galahad/Library/Caches/CocoaPods/Pods/External/glog/2263bd123499e5b93b5efe24871be317-e8acf/missing: Unknown `--is-lightweight' option
Try `/Users/galahad/Library/Caches/CocoaPods/Pods/External/glog/2263bd123499e5b93b5efe24871be317-e8acf/missing --help' for more information
configure: WARNING: 'missing' script is too old or missing
configure: error: in `/Users/galahad/Library/Caches/CocoaPods/Pods/External/glog/2263bd123499e5b93b5efe24871be317-e8acf':
configure: error: C compiler cannot create executables
See `config.log' for more details

解决：
执行下面命令：

$ sudo xcode-select --switch /Applications/Xcode.app/Contents/Developer/

输入mac密码后重新安装

$ pod install

问题3：

Ensure the following:

- Node server is running and available on the same network - run 'npm start' from react-native root

- Node server URL is correctly set in AppDelegate

- WiFi is enabled and connected to the same network as the Node Server

URL: http://localhost:8081/index.bundle?platform=ios&dev=true Could not connect to the server.)

看手机的wifi应当和电脑连接的是同一个网络
打开偏好设置-网络-查看当前ip地址，将项目中的localhost改为当前ip

jsCodeLocation = NSURL(string:"http://192.168.30.39:8081/index.bundle?platform=ios")!

如果直接运行xcode无法运行，可以试试命令行

npm start

react-native run-ios --device "手机名"

问题4： cocopods报错
一个很尴尬的事情。用RN混编swift的代码 如果加了use_frameworks!会报错

而方法是是去掉use_frameworks
但是去掉之后会报

解决方法是加上use_frameworks

解决：
先去除掉use_frameworks

# which 指代的 是 YYImage 即依赖的库
pod 'BSText'
pod 'YYImage',:modular_headers => true                

问题5：react-native命令不生效

配置reactNative（RN）过程中 出现react-native：command not found 和 zsh: command not found: react-native