AVD 上的 react-native 无法连接到 exp://IP:PORT



按照使用反应原生 (https://facebook.github.io/react-native/docs/getting-started.html( 的 facebook.io 教程,我遇到了一个问题,我用来测试应用程序的 AVD 安卓模拟器抱怨

出了点问题。无法加载 exp://192.168.200.83:19000。

请注意,这是在通过create-react-native-app myapp生成的新/未编辑项目上完成的:

# after having started the AVD and creating the react-native app...
➜  myap npm start               
> myapp@0.1.0 start /<path to my react native app>/myapp
> react-native-scripts start
3:26:37 PM: Starting packager...
Packager started!                                   
Your app is now running at URL: exp://192.168.200.83:19000
View your app with live reloading:
Android device:
-> Point the Expo app to the QR code above.
(You'll find the QR scanner on the Projects tab of the app.)
iOS device:
-> Press s to email/text the app URL to your phone.
Emulator:
-> Press a to start an Android emulator.
Your phone will need to be on the same local network as this computer.
For links to install the Expo app, please visit https://expo.io.
Logs from serving your app will appear here. Press Ctrl+C at any time to stop.
› Press a to open Android device or emulator.
› Press s to send the app URL to your phone number or email address
› Press q to display QR code.
› Press r to restart packager, or R to restart packager and clear cache.
› Press d to toggle development mode. (current mode: development)
<press a>

此时,AVD 上会打开一个窗口(大概是尝试启动 react-native 应用程序(并显示上述错误。

(还尝试使用npm run android启动应用程序并从 AVD 上的博览会应用程序打开链接,但仍然收到相同的错误(。

有谁知道此时可以做什么(对反应和移动开发完全陌生,所以我大多只遵循教程中的内容(?我应该在这个问题中添加任何其他信息吗?

看看这个类似的 github 帖子 (https://github.com/react-community/create-react-native-app/issues/595#issuecomment-373539195(,这似乎是使用错误网络的问题(即使用 AVD 无法访问的 LAN URL(。使用该帖子中描述的exp start --tunnel方法确实生成了一个我的手机博览会应用程序实际上可以解释的URL。我让事情正常工作的步骤如下所示。(注意我使用的是 Ubuntu 16.04(

查看安装watchman(https://facebook.github.io/watchman/docs/install.html#system-specific-preparation(的文档(由 react-native(在 Linux 上使用((。我看到关于增加 linux 上的 inotify 限制有一个特定的事情(尽管没有给出任何特定值((有关 inotify 的信息,请参阅 https://en.wikipedia.org/wiki/Inotify(。


因此,在从源代码安装守望者之后(这似乎是目前在 Linux 上获取它的唯一方法(......

$ cd ~
$ git clone https://github.com/facebook/watchman.git
$ cd watchman/
$ git checkout v4.7.0
$ sudo apt-get install -y autoconf automake build-essential python-dev
$ ./autogen.sh 
$ ./configure 
$ make
$ sudo make install
$ watchman --version

。我们提高了 inotify 限制。

$ echo 999999 | sudo tee -a /proc/sys/fs/inotify/max_user_watches  
&& echo 999999 | sudo tee -a  /proc/sys/fs/inotify/max_queued_events 
&& echo 999999 | sudo tee  -a /proc/sys/fs/inotify/max_user_instances 
&& watchman shutdown-server

基于这个较旧的 SE 帖子(https://askubuntu.com/a/155343/760862((基本上表明它根本不占用太多资源(,我假设(并希望(像这样增加它是可以的。

(像这样增加 inotify 限制似乎真的有助于解决我在处理 react-native 项目时遇到的一系列其他问题(例如,尝试捆绑导出到设备时 JavaScript 冻结,设备抱怨"出了点问题"或完全没有响应我试图将程序导出给他们,等等((


现在,导航到项目目录并使用--tunnel选项启动 exp 服务器进程。从文档 (https://docs.expo.io/versions/latest/workflow/exp-cli(:

隧道(默认(、局域网、本地主机。要使用的主机类型。"隧道"允许您在其他网络上查看您的链接

exp start --tunnel
22:21:14 [exp] Your URL is: exp://xm-apt.myexpousername.myapp.exp.direct:80
22:21:14 [exp] Instructions to open this project on a physical device
22:21:14 [exp] Android devices: scan the above QR code.
22:21:14 [exp] iOS devices: run exp send -s <your-phone-number-or-email> in this project directory in another terminal window to send the URL to your device.
22:21:14 [exp] Instructions to open this project on a simulator
22:21:14 [exp] If you already have the simulator installed, run exp ios or exp android in this project directory in another terminal window.
22:21:14 [exp] Logs for your project will appear below. Press Ctrl+C to exit.

如果您看到类似 exp://192.168.200.83:19000 的 URL,则还应该看到一些日志记录消息,例如

21:30:35 [exp] 切换到局域网 URL,因为隧道似乎 下。只有同一网络中的设备才能访问该应用程序。重新启动exp start --tunnel尝试重新连接。

只需使用相同的命令重新启动,URL 应该是非 LAN 位置。


可选(如果要改用项目中npm start中的接口(

然后打开另一个终端选项卡并像这样运行npm start命令

REACT_NATIVE_PACKAGER_HOSTNAME='xm-apt.myexpousername.myapp.exp.direct' npm start -- --reset-cache

其中REACT_NATIVE_PACKAGER_HOSTNAME设置为上一步中的 exp URL(有关此信息可以在通过create-react-native-app创建的每个 React 本机应用程序的自述文件中找到(。此处创建的 URL 现在应该是类似

Your app is now running at URL: exp://xm-apt.myexpousername.myapp.exp.direct:19000

现在打开另一个选项卡。请注意,在运行exp流程的选项卡上,应该有有关如何在不同设备上打开项目的说明(例如,本答案的前面(。使用这些说明使用我们刚刚打开的此选项卡为不同的设备打开项目(在我的情况下,对于 AVD,正在运行exp android(您应该在运行 exp 进程的选项卡中看到一些消息,例如22:28:57 [exp] Finished building JavaScript bundle in 97ms让您知道它正在工作((。

任何事情的反应都是全新的,所以如果有人看到有关此设置的任何多余或奇怪的内容,请告诉我。

最新更新