RN环境配置及运行报错解决

环境配置

1.brew install node node环境是启动本地server开发环境，实时预览，编译，打包都是基于node.js的相应的npm包完成的，react native的开发环境中也涉及到这些所以node.js是必须安装的基础环境

测试安装是否成功：node -v 控制台出现下面字样说明成功

➜  ~ node -v                 
v16.3.0
➜  ~ 

2.brew install watchman 是由 Facebook 提供的监视监视文件并且记录文件的改动情况，当文件变更它可以触发一些操作,例如执行一些命令等等，可以提高开发时的性能

3.npm install -g react-native-cli 方便我们使用react-native命令去创建项目和运行项目

4.react-native init MyApp11 --version 0.44.3 0.45 及以上版本需要下载很多第三方库编译。这些库在国内即便翻墙也很难下载成功，导致很多人无法运行。所以此处指定版本进行创建项目。执行过程比较长耐心等待，出现以下信息说明创建成功。

To run your app on iOS:
   cd /Users/mac2021/Desktop/MyApp11
   react-native run-ios
   - or -
   Open ios/MyApp11.xcodeproj in Xcode
   Hit the Run button
To run your app on Android:
   cd /Users/mac2021/Desktop/MyApp11
   Have an Android emulator running (quickest way to get started), or a device connected
   react-native run-android

5.按照上面提示执行下面命令
cd /Users/mac2021/Desktop/MyApp11 进入工程目录
react-native run-ios 运行iOS项目

6.此时报错Could not find iPhone 6 simulator，因为项目创建时是默认使用iPhone 6运行项目，需要修改下面两处配置文件：
找到MyApp11/node_modules/react-native/local-cli/runiOS/findMatchingSimulator.js 进行修改下面代码

   // if (version.indexOf('iOS') !== 0) {
    //   continue;
    // }
    if (version.indexOf('iOS') !== 0 && !version.includes('iOS')) {
      continue;
    }

  // if (simulator.availability !== '(available)') {
      //   continue;
      // }
      if (simulator.isAvailable !== true) {
        continue;
      }

找到MyApp11/node_modules/react-native/local-cli/runiOS/runiOS.js 将默认模拟器改成Xcode 已经有的模拟器，我改的是：default: 'iPhone 8',

module.exports = {
  name: 'run-ios',
  description: 'builds your app and starts it on iOS simulator',
  func: runIOS,
  examples: [
  {
    desc: 'Run on a different simulator, e.g. iPhone 5',
    cmd: 'react-native run-ios --simulator "iPhone 5"',
  },
  {
    desc: 'Pass a non-standard location of iOS directory',
    cmd: 'react-native run-ios --project-path "./app/ios"',
  },
  {
    desc: "Run on a connected device, e.g. Max's iPhone",
    cmd: 'react-native run-ios --device "Max\'s iPhone"',
  },
  ],
  options: [{
    command: '--simulator [string]',
    description: 'Explicitly set simulator to use',
    default: 'iPhone 8',
  } , {
    command: '--configuration [string]',
    description: 'Explicitly set the scheme configuration to use',
  } , {
    command: '--scheme [string]',
    description: 'Explicitly set Xcode scheme to use',
  }, {
    command: '--project-path [string]',
    description: 'Path relative to project root where the Xcode project '
      + '(.xcodeproj) lives. The default is \'ios\'.',
    default: 'ios',
  }, {
    command: '--device [string]',
    description: 'Explicitly set device to use by name.  The value is not required if you have a single device connected.',
  }, {
    command: '--udid [string]',
    description: 'Explicitly set device to use by udid',
  }, {
    command: '--no-packager',
    description: 'Do not launch packager while building',
  }],
};

7. Print: Entry, ":CFBundleIdentifier", Does Not Exist 报错，是因为8081端口被占用问题，用Xcode 打开MyApp11文件中的iOS项目，全局搜索8081并修改没有占用的端口，此处我改为8089。

截屏2021-06-07 下午3.56.47.png

截屏2021-06-07 下午3.57.29.png

8.找到MyApp11/node_modules/react-native/local-cli/server/server.js 将端口号修改为8089，再运行项目

截屏2021-06-07 下午4.06.04.png

9.找到MyApp11/node_modules/react-native/React/Base/RCTModuleMethod.m

//static BOOL RCTParseUnused(const char **input)
//{
//  return RCTReadString(input, "__unused") ||
//         RCTReadString(input, "__attribute__((unused))");
//}
修改后
static BOOL RCTParseUnused(const char **input)
{
  return RCTReadString(input, "__attribute__((unused))") ||
         RCTReadString(input, "__attribute__((__unused__))") ||
         RCTReadString(input, "__unused");
}

截屏2021-06-07 下午4.41.29.png

10. 运行成功

截屏2021-06-07 下午4.43.32.png

11. 创建高版本RN 项目 ：react-native init rnProject1 默认是最新版本 使用Webstorm 打开项目，注意要修改端口号，不然运行不起来。选中WebStorm 打开项目中的node_modules -> Replace in Files -> 改8081为8082 。在控制台运行：react-native run-ios

截屏2021-06-09 上午10.44.06.png