前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >RN(0.67)接入现有swift项目及常见问题

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

作者头像
谦谦君子修罗刀
发布2022-03-10 15:21:11
1K0
发布2022-03-10 15:21:11
举报
文章被收录于专栏:谦谦君子修罗刀

一、创建RN新项目

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

代码语言:javascript
复制
npx react-native init xxx项目名

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

2、修改podfile文件

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

RN集成Pod的版本

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

代码语言:javascript
复制
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文件

代码语言:javascript
复制
 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:

代码语言:javascript
复制
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:

代码语言:javascript
复制
[!] /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

解决: 执行下面命令:

代码语言:javascript
复制
$ sudo xcode-select --switch /Applications/Xcode.app/Contents/Developer/

输入mac密码后重新安装

代码语言:javascript
复制
$ pod install

问题3:

代码语言:javascript
复制
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

代码语言:javascript
复制
jsCodeLocation = NSURL(string:"http://192.168.30.39:8081/index.bundle?platform=ios")!

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

代码语言:javascript
复制
npm start
代码语言:javascript
复制
react-native run-ios --device "手机名"

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

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

解决方法是加上use_frameworks

解决: 先去除掉use_frameworks

代码语言:javascript
复制
# 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

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2022.03.02 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 一、创建RN新项目
  • 二、常见问题
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档