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和＆本地主机之间切换...结果相同

Answer 1

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

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

如果其中的[[无]]有效，那么该应用在Android上能否正常运行？您可能遇到了特定于iOS的问题，至少可以缩小搜索范围以调试此问题。

[以供​​将来参考，React Native GitHub Issues对于发现社区中遇到类似问题的人们确实很有帮助。