React-native 项目升级Xcode 11全记录

本文记录了React Native项目升级至Xcode11的过程,包括解决编译问题、模拟器兼容性、UIWebView替换为WKWebView,以及排查第三方库依赖导致的警告。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

React-native 项目升级Xcode 11全记录

react-native 版本

$ react-native --version
react-native-cli: 2.0.1
react-native: 0.57.7

版本比较早的项目,最近提交App store 出现warning
1.升级ios sdk 到13
2.包含UIWebview
不改掉的话4月以后可能就会被拒了。没办法,作为一个android出身的转行RN的苦逼码农,只能投身ios开发的行列,去对抗xcode。

第一步:直接App store 升级Xcode11

升级过程不表,其实早就可以升级,但是之前一直卡者一个编译问题,所以迟迟不肯升级,现在没办法了,只能先解决这个编译问题:duplicate symbols。
在这里插入图片描述

万能的google果然有类似的问题,虽然看起来这更像一个workaround。

个人理解这个应该是一个symbol 重复定义的问题,问题应该处在.a文件,但是.a文件来自第三方,所以目前能用这种workaround解决就先这样退而求其次吧。

react-native run-ios

试着run一下吧,发现立马就出新问题了
Can’t find iPhone X simulator
找不到可以启动的模拟器,之前在xcode 10上就遇到过类似的问题。当时还是修改的findMatchingSimulator.js 后搞定的。这次不出意外,google还是告诉我这样改:
在这里插入图片描述

依样画葫芦,果然run起来了。第一个问题搞定。

新版Xcode新版sdk,这是Apple的规矩?!

但是有出现红屏问题,找不到__attribute__ bulabula…
还是靠google:
在这里插入图片描述

UIWebview

RN代码里没有显式的使用iOS的UIWebview,但是rn的文档说的很清楚,

  • 在 上添加 useWebKit={true}
  • 删除 Libraries/React.xcodeproj/React/Views/
    RCTWebView.h、
    RCTWebView.m、
    RCTWebViewManager.h、R
    CTWebViewManager.m

在代码中设置

useWebKit={true}

就会用WKWebview替代UIWebview。所以把js代码中把webview都加上这个设置。
同时还得把RN源码包里的对应文件删除。

打包上传,不OK,warning还在。

莫非原生代码里也有在使用UIWebview,grep 一把,果然有一处代码在使用UIWebview获取User Agent。不用UIWebview如何能拿到UA,找到替换方案即可:

 WKWebView *emptyWebview = [[WKWebView alloc] init];
 NSURLRequest *request = [[NSURLRequest alloc] initWithURL:[NSURL URLWithString:@"www.baidu.com"] cachePolicy:NSURLRequestUseProtocolCachePolicy timeoutInterval:10];
 [emptyWebview loadRequest:request];
 [emptyWebview evaluateJavaScript:@"navigator.userAgent" completionHandler:^(id result, NSError *error) {
     NSString *userAgent = result;
     ......
  }];

OC语法生疏,看个大概意思:通过一个request才能拿到UA ?

改完这个再提交一次,还是不OK,还能有什么地方再用UIWebview?

在build目录中找

ios/build/Build/Products/Debug-iphonesimulator$ grep -rn UIWebview .

app 在build中的产物都会放到这个目录里去,所以在这个目录中应该可以找到线索。
果然*.app目录里match到了,除此之外还在其他的.a binary中匹配到了。可以理解第三方库的问题,去官网上查看,果然有对应问题的方案:升级版本。

升级之后再打包,终于OK!

结论得出:我是一个靠google吃饭的程序员。

### 如何安装和配置 React-Native 项目 React-Native 是一个用于构建跨平台移动应用的框架,支持 iOS 和 Android 平台。以下是关于如何安装和配置 React-Native 项目的详细指南。 #### 环境准备 在开始之前,确保开发环境已经满足以下条件: - 安装 Node.js 和 npm 或 yarn。 - 安装 JDK(对于 Android 开发)。 - 安装 Xcode(对于 iOS 开发)。 - 安装 Android Studio(对于 Android 开发),并配置好 Android SDK 和 NDK。 #### 创建 React-Native 项目 使用 `npx` 或全局安装的 `react-native-cli` 工具来创建一个新的 React-Native 项目: ```bash npx react-native init MyProjectName ``` 这将初始化一个新的 React-Native 项目,并自动安装必要的依赖项[^5]。 #### 安装额外的依赖库 根据项目需求,可以安装一些常用的第三方库,例如矢量图标库 `react-native-vector-icons`。可以通过以下命令安装该库: ```bash npm install react-native-vector-icons --save ``` 或者使用 Yarn: ```bash yarn add react-native-vector-icons ``` 完成安装后,需要对 Android 和 iOS 项目进行链接操作。对于 Android 项目,需修改 `android/app/build.gradle` 文件,添加以下内容: ```gradle project(':react-native-vector-icons').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-vector-icons/android') ``` 对于 iOS 项目,可以直接运行以下命令完成链接: ```bash npx pod-install ios ``` #### 配置自定义字体 如果需要在项目中使用自定义字体,可以参考以下步骤: 1. 将字体文件放入 `assets/fonts` 目录。 2. 在 `react-native.config.js` 文件中添加字体配置: ```javascript module.exports = { project: { ios: {}, android: {}, }, assets: ['./assets/fonts/'], }; ``` 3. 运行以下命令以链接字体资源: ```bash npx react-native link ``` #### 集成热更新工具 为了实现应用的热更新功能,可以集成 `react-native-code-push` 插件。首先安装插件: ```bash npm install react-native-code-push --save ``` 然后配置 Android 和 iOS 项目。对于 Android 项目,修改 `android/app/build.gradle` 文件: ```gradle project(':react-native-code-push').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-code-push/android/app') ``` 对于 iOS 项目,需手动添加 `CodePush` 框架到工程中,并配置相关参数[^2]。 #### 启动开发服务器 完成上述配置后,可以启动开发服务器并运行项目: ```bash npx react-native start ``` 在另一终端窗口中运行以下命令启动应用: ```bash npx react-native run-android ``` 或 ```bash npx react-native run-ios ``` ### 注意事项 - 如果遇到依赖冲突问题,可以尝试删除 `node_modules` 目录并重新安装依赖: ```bash rm -rf node_modules && npm install ``` - 对于 iOS 项目,建议定期运行 `pod install` 命令以确保依赖正确安装。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值