React-Native 项目（无法连接到开发服务器）

Question

首先！

☁  wonder  react-native --version
react-native-cli: 2.0.1
react-native: 0.58.6
☁  wonder  node --version
v13.6.0
☁  wonder  npm --version
6.13.4

当我尝试在本地模拟器上构建和执行时，我得到了；

尽管此端口上没有运行任何东西，这是 RN 项目的开箱即用端口，但我将粘贴我的 AppDelagate 文件和工具版本..谁能解释它是如何工作的，以便我进行故障排除.

> react-native run-ios

Found Xcode project wonder.xcodeproj
Building using "xcodebuild -project wonder.xcodeproj -configuration Debug -scheme wonder -destination id=C9362944-1FDD-4D6E-A6BB-8E758F427 -derivedDataPath build"
User defaults from command line:

    IDEDerivedDataPathOverride = /Users/{NAME}/Documents/Projects/wonderService/wonder/ios/build


note: Using new build system

note: Planning build

note: Using build description from disk

PhaseScriptExecution Start\ Packager /Users/{NAME}/Documents/Projects/wonderService/wonder/ios/build/Build/Intermediates.noindex/React.build/Debug-iphonesimulator/React.build/Script-006B79A01A781F3800
6873D1.sh (in target 'React' from project 'React')
    cd /Users/{NAME}/Documents/Projects/wonderService/wonder/node_modules/react-native/React
    /bin/sh -c /Users/{NAME}/Documents/Projects/wonderService/wonder/ios/build/Build/Intermediates.noindex/React.build/Debug-iphonesimulator/React.build/Script-006B79A01A781F38006873D1.sh

Connection to localhost port 8081 [tcp/sunproxyadmin] succeeded!

AppDelegate.h 文件

#import "AppDelegate.h"

#import <React/RCTBundleURLProvider.h>
#import <React/RCTRootView.h>

@implementation AppDelegate

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
  NSURL *jsCodeLocation;

  jsCodeLocation = [NSURL URLWithString:@"http://localhost:8081/index.ios.bundle"];

  jsCodeLocation = [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index" fallbackResource:nil];

  RCTRootView *rootView = [[RCTRootView alloc] initWithBundleURL:jsCodeLocation
                                                      moduleName:@"wonder"
                                               initialProperties:nil
                                                   launchOptions:launchOptions];
  rootView.backgroundColor = [UIColor blackColor];

  self.window = [[UIWindow alloc] initWithFrame:[UIScreen mainScreen].bounds];
  UIViewController *rootViewController = [UIViewController new];
  rootViewController.view = rootView;
  self.window.rootViewController = rootViewController;
  [self.window makeKeyAndVisible];
  return YES;
}

@end

上面我确实记得必须添加

jsCodeLocation = [NSURL URLWithString:@"http://localhost:8081/index.ios.bundle"];

这可以逆转。但是，我不认为这是错误

我也明白在为项目定制 PORTS 时可以在这里制作

node_modules/react-native/React/React.xcodeproj/project.pbxproj

但没有迹象表明实例中使用了任何其他 PORT。

最后，我在使用 127.0.0.1 && localhost... 之间切换...结果相同

Answer 1

更新！

您是否尝试过以下方法：

rm -rf node_modules 
npm clean cache
watchman watch-del-all
npm i
npm start -- --reset-cache

您可能有一些 npm 路径问题。

===================================

我可以看到三个主要问题可能导致此问题：

1. 您实际上是在 8081 上运行某些东西而没有意识到它
2. 您的节点服务器实际上并未运行
3. 您尚未正确设置 iOS 模拟器以连接到正确的网络

端口问题

你可以试试：react-native start --port=8088。然后在不同的终端窗口中运行 react-native run-ios --port=8088 以运行 iOS 应用程序。

如果它工作正常，那么您可能实际上在 :8081 上运行了一些东西，您可以通过执行以下操作来仔细检查：

sudo lsof -i :8081

如果除了您的节点服务器之外出现任何其他问题，那么您可以kill -9 <PID> 杀死任何其他进程。

注意：8081 是一个流行的杀毒软件服务器，所以你应该杀死你的病毒软件（不推荐）或者在你的 package.json 中的 react-native run-ios 命令中指定一个不同的端口来运行 react native

运行节点服务器

检查你的 npm 服务器是否真的在运行。我建议在你的项目根目录中运行react-native start。然后在单独的终端窗口中尝试react-native run-ios。如果它工作正常，那么您的节点服务器只是没有运行。

仔细检查您的模拟器网络

在您的项目根目录中运行yarn start，然后打开http://localhost:8081/debugger-ui 并查看页面是否加载。如果页面没有加载，那么您的模拟器可能没有连接到正确的网络。您可以在模拟器的设置页面中更改这些设置。

注意：iOS 被称为“模拟器”而不是 Android 的“模拟器”是有原因的，XCode 运行的“iPhone”不模仿 iOS 设备的硬件和软件功能，只是软件，所以你由于模拟器的功能有限，在 iOS 上运行 React Native 可能会遇到奇怪的问题，这里有一个相关的 Stack Overflow

如果 none 可以，那么该应用在 Android 中是否可以正常运行？您可能有一个特定于 iOS 的问题，这至少可以缩小您对调试此问题的搜索范围。

为了将来参考，React Native GitHub Issues 非常有助于在社区中找到遇到类似问题的人。

Answer 2

我的案例是在使用的端口 8081 上。

我通过终止端口上的进程来修复它，再次启动服务器，然后在 iOS 或 Android 上运行 RN：

sudo lsof -t -i tcp:8081 | xargs kill -9
npm start
react-native run-ios
react-native run-android

Answer 3

@玛姬

端口问题

没有运行；

节点服务器

这对它有一些吸引力；

• 服务器终端读取此内容

Error: Unable to resolve module "./index.ios" from "/Users/chris/Documents/Projects/wonderService/wonderFront/.": The module "./index.ios" could not be found from "/Users/chris/Documents/Projects/wonderService/wonderFront/.". Indeed, none of these files exist: * "/Users/chris/Documents/Projects/wonderService/wonderFront/index.ios(.native||.ios.js|.native.js|.js|.ios.json|.native.json|.json|.ios.ts|.native.ts|.ts|.ios.tsx|.native.tsx|.tsx)" * "/Users/chris/Documents/Projects/wonderService/wonderFront/index.ios/index(.native||.ios.js|.native.js|.js|.ios.json|.native.json|.json|.ios.ts|.native.ts|.ts|.ios.tsx|.native.tsx|.tsx)" at ModuleResolver.resolveDependency (/Users/chris/Documents/Projects/wonderService/wonderFront/node_modules/metro/src/node-haste/DependencyGraph/ModuleResolution.js:163:15)

Answer 4

我在 IOS 设备上运行 react native 应用程序时遇到了同样的问题（无法连接到开发服务器）。对我来说，问题是端口号，我将端口号从 8081 更改为 9988，一切正常。

1. 我在 package.json 中更改了这两个脚本

   "ios": "react-native run-ios --device --port=9988",

   "start": "react-native start --port=9988",

2. 我在 metro.config.js 文件中的 module.exports 中添加了新的端口号。

   服务器：{端口：9988，}