search

reactnativecn / react-native-website

React Native 中文网
https://reactnative.cn
MIT License
219 stars 328 forks source link

当前flipper与Xcode 15.3不兼容 #811

Closed Viennacacao closed 3 months ago

Viennacacao commented 8 months ago

请按以下格式提供问题的相关信息。 按照前面步骤完成后，在启用yarn ios时报错，报错信息如下图所示

image

System: OS: macOS 14.4 CPU: (16) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz Memory: 217.02 MB / 32.00 GB Shell: version: "5.9" path: /bin/zsh Binaries: Node: version: 20.11.1 path: /usr/local/bin/node Yarn: version: 1.22.21 path: /usr/local/bin/yarn npm: version: 10.2.4 path: /usr/local/bin/npm Watchman: version: 2024.01.22.00 path: /usr/local/bin/watchman Managers: CocoaPods: version: 1.15.2 path: /usr/local/bin/pod SDKs: iOS SDK: Platforms:

This is a new React Native project, bootstrapped using @react-native-community/cli.

Getting Started

Note: Make sure you have completed the React Native - Environment Setup instructions till "Creating a new application" step, before proceeding.

Step 1: Start the Metro Server

First, you will need to start Metro, the JavaScript bundler that ships with React Native.

To start Metro, run the following command from the root of your React Native project:

# using npm
npm start

# OR using Yarn
yarn start

Step 2: Start your Application

Let Metro Bundler run in its own terminal. Open a new terminal from the root of your React Native project. Run the following command to start your Android or iOS app:

For Android

# using npm
npm run android

# OR using Yarn
yarn android

For iOS

# using npm
npm run ios

# OR using Yarn
yarn ios

If everything is set up correctly, you should see your new app running in your Android Emulator or iOS Simulator shortly provided you have set up your emulator/simulator correctly.

This is one way to run your app — you can also run it directly from within Android Studio and Xcode respectively.

Step 3: Modifying your App

Now that you have successfully run the app, let's modify it.

  1. Open App.tsx in your text editor of choice and edit some lines.

  2. For Android: Press the R key twice or select "Reload" from the Developer Menu (Ctrl + M (on Window and Linux) or Cmd ⌘ + M (on macOS)) to see your changes!

    For iOS: Hit Cmd ⌘ + R in your iOS Simulator to reload the app and see your changes!

Congratulations! :tada:

You've successfully run and modified your React Native App. :partying_face:

Now what?

Troubleshooting

If you can't get this to work, see the Troubleshooting page.

Learn More

To learn more about React Native, take a look at the following resources:

Viennacacao commented 8 months ago

解决办法：进去ios文件夹里的profile文件 注释掉所有flipper 相关代码 then： cd ios

pod install

cd ..

yarn ios

sunnylqm commented 8 months ago

已知的flipper和xcode 15.3的兼容问题，但flipper即将被弃用，所以注释掉也算是解决方案 https://github.com/facebook/react-native/issues/43335#issuecomment-1980788427

syzq commented 7 months ago

cd ios找到 Podfile 文件，然后删除 :flipper_configuration => flipper_config 这行代码就可以运行了

atypiape commented 7 months ago

我写了个 node 脚本用来解决这个问题，脚本可以命名为 fix-flipper.js：

/**
 * 修复 FlipperTransportTypes.h 文件中未包含 "#include <functional>" 的问题。
 *
 * 由于升级到 XCode 15.3 后，FlipperKit 编译会报错，需要经常手动向
 * `ios/Pods/Flipper/xplat/Flipper/FlipperTransportTypes.h` 中引入头文件。
 * 此脚本实现了自动引入头文件的功能，并在 yarn ios 的时候被调用。
 *
 * 参见: https://github.com/facebook/react-native/issues/43335
 */
const fs = require('node:fs');
const path = require('node:path');
const chalk = require('chalk');

// 彩色日志输出函数
const logBlue = (/** @type {string} */ text) => console.log(chalk.blue(text));
const logGreen = (/** @type {string} */ text) => console.log(chalk.green(text));
const logRed = (/** @type {string} */ text) => console.log(chalk.red(text));

// FlipperTransportTypes.h 文件名和相对路径
const FILE_NAME = 'FlipperTransportTypes.h';
const FILE_PATH = `ios/Pods/Flipper/xplat/Flipper/${FILE_NAME}`;

// 要插入的代码
const INSERT_CODE = '#include <functional>';

// 拿到绝对路径
const file = path.resolve(__dirname, '../', FILE_PATH);

if (!fs.existsSync(file)) {
  logRed(`[Error] 文件不存在: ${file}`);
  return;
}

logBlue(`处理文件: ${FILE_NAME}`);

// 读取文件内容并分割成行
let content = fs.readFileSync(file, 'utf8');
const lines = content.split('\n');

// 找到引入头文件的行号
const index = lines.findIndex((line) => line.includes('#include'));

if (index < 0) {
  logRed(`[Error] 文件中未找到 "#include"`);
  return;
}

// 如果已经引入 functional，就不再重复引入
if (lines.findIndex((line) => line.includes(INSERT_CODE)) >= 0) {
  logGreen(`代码已存在: "${INSERT_CODE}"\n无需修复!\n`);
  return;
}

logGreen(`插入代码: ${INSERT_CODE}`);

// 插到其他头文件引入语句后面
lines[index] += `\n${INSERT_CODE}`;
content = lines.join('\n');

fs.writeFileSync(file, content, 'utf8');
logGreen('修复成功!\n');

再加个 run.sh 脚本来替换掉 yarn ios：

"scripts": {
  "android": "./scripts/run.sh android",
  "ios": "./scripts/run.sh ios",
}

run.sh 脚本内容大致如下：

#!/usr/bin/env bash

set -e

if [[ $1 != "android" ]] && [[ $1 != "ios" ]]; then
  echo -e "\033[31m 参数需为 android 或 ios \033[0m"
  exit 1
fi

yarn install

# 用 ESLint 检查代码
echo -e "\033[1;34m **** ESLint 检查 **** \033[0m"
yarn eslint . --ext .js,.jsx,.ts,.tsx

# 运行 Android 应用
if [ $1 == "android" ]; then
  echo -e "\033[1;34m **** 打包 Android 应用 **** \033[0m"
  react-native run-android --verbose --active-arch-only
fi

# 运行 iOS 应用
if [ $1 == "ios" ]; then
   # 修复因升级到 XCode 15.3 导致的 FlipperKit 编译失败问题
   # 参见 https://github.com/facebook/react-native/issues/43335
  echo -e "\033[1;33m \n修复 FlipperKit 需请求权限! \033[0m"
  sudo node ./scripts/fix-flipper.js

  echo -e "\033[1;34m **** 打包 iOS 应用 **** \033[0m"
  react-native run-ios --verbose
fi

这样子，执行 yarn ios 的时候就可以自动修复了

github-actions[bot] commented 3 months ago

👋 Hey there, it looks like there has been no activity on this issue in the last 90 days. Has the issue been fixed, or does it still require the community attention? This issue will be closed in the next 7 days if no further activity occurs. Thank you for your contributions.

github-actions[bot] commented 3 months ago

Closing this issue after a prolonged period of inactivity. If this issue is still present in the latest release, please feel free to create a new issue with up-to-date information.