代码之家 › 专栏 › 技术社区 › lampShadesDrifter

avd上的react native无法连接到exp://ip:port

react-native

lampShadesDrifter · 技术社区 · 7 年前

遵循facebook.io教程使用react native( https://facebook.github.io/react-native/docs/getting-started.html )我遇到了一个问题,我用来测试应用程序的avd android模拟器正在抱怨

出了问题。无法加载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上expo应用程序的链接,但仍然出现同样的错误)。

有人知道在这一点上可以做什么吗(React和移动开发是全新的,所以我基本上只关注教程中的内容)?我还有什么要补充的吗?

1 回复 | 直到 7 年前

lampShadesDrifter 6 年前

看看这个类似的github帖子( https://github.com/react-community/create-react-native-app/issues/595#issuecomment-373539195 ),这似乎是使用错误网络的问题 (即使用AVD无法访问的LAN URL) . 使用 exp start --tunnel 在那篇文章中描述的方法确实生成了一个url,我的手机世博应用程序可以实际解释这个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 )

所以在从源代码安装watchman之后(这似乎是目前在linux上获得watchman的唯一方法)。

$ 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

…我们增加了免疫限度。

$ 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原生项目时遇到的一堆其他问题(例如,当试图打包导出到设备时javascript冻结,设备抱怨“出了问题”,或者对我的尝试完全没有反应)向他们出口项目等)

现在,导航到项目目录并使用 --tunnel 选择。从文件中( https://docs.expo.io/versions/latest/workflow/exp-cli ):

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

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]切换到LAN URL,因为隧道似乎是下来。只有同一网络中的设备才能访问应用程序。重新启动具有 exp start—隧道 尝试重新连接。

只要用相同的命令重新启动,url应该是非lan位置。

可选(如果要使用 npm start 而是在项目中)

然后打开另一个终端选项卡并运行 NPM启动 像这样的命令

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

其中,react_native_packager_主机名设置为上一步中的exp url(有关此信息,请参阅通过 create-react-native-app )。此处创建的url现在应该类似于

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

现在打开另一个标签。请注意,在运行exp进程的选项卡上,应该有关于如何在不同设备上打开项目的说明(例如,本答案的前面部分)。按照以下说明,使用我们刚刚打开的这个选项卡为不同的设备打开项目(在我的例子中,对于avd,running exp android (您应该在运行exp进程的选项卡中看到一些消息,如 22:28:57 [exp] Finished building JavaScript bundle in 97ms 让你知道它在起作用)。

全新的反应- 任何东西 因此,如果有人看到这个设置是多余或奇怪的,请让我知道。