• 技术文章 >web前端 >js教程

    react native怎么修改端口

    藏色散人藏色散人2021-11-26 11:14:04原创70

    react native修改端口的方法:1、通过npm start命令启动React Native本地服务器的端口号;2、修改server.js文件;3、将默认的8081端口修改为你想要的端口号即可。

    本文操作环境:Windows7系统、react17.0.1、Dell G3。

    react native怎么修改端口?

    教你轻松修改React Native端口(如何同时运行多个React Native、8081端口占用问题)_fengyuzhengfan的专栏-CSDN博客

    期待已久的新课上线啦!解锁React Native开发新姿势,一网打尽React Native最新与最热技术,点我Get!!!

    当我们运行一个React Native项目的时候,React Native会启动一个默认端口号为8081的本地服务,该8081的服务就是React Native项目的一个本地服务器,用于提供JSBundle包和一些静态资源。这一切都是React Native帮开发者配置好的,一切都是那么简便,但如果出现如下几种情况,那么你需要认真阅读本文了:

    修改React Native监听端口

    启动React Native服务默认会监听8081端口,那么如何修改这个默认的端口呢?接下来就跟着我一步一步的来修改React Native服务默认监听的端口吧!

    第一步:修改Server端口

    所谓Server端口,也就是我们通过npm start或者react-native run-xxx命令启动的React Native本地服务器的端口号,如图:
    812ff75968c4e568ee70459a5aa167f.png

    临时修改Server端口

    查看最新的server.js的源码,不难发现一下一段代码:

    ...
    command: '--port [number]',
    default: 8081,
    parse: (val: string) => Number(val),
    ...

    从上述代码中可以看出,我们在启动react native服务的时候可以为它指定一个端口号:

    react-native start --port=8082

    提示:上述代码,是2017年8月1号提交的一个pull request,所以说在2017年8月1之前的React Native版本是没有这个功能的。

    永久修改Server端口

    要永久修改这个默认端口号,我们需要修改server.js文件,server.js所在位置,在:

    你的项目名称/node_modules/react-native/local-cli/server/server.js

    找到这个文件,打开它,然后将默认的8081端口修改为你想要的端口号即可:

    23272982fe736fec22f750842028729.png

    修改好之后,需要验证一下有么有生效,怎么验证呢,方法很简单,在项目根目录下运行npm start即可:
    d4b059c7242f251e018f883fd2b69a9.png

    从上图可以看出,这里我们已经将react-native的默认端口修改为了8082。

    第二步:修改iOS项目的端口号

    在修改了React Native 服务的端口号之后,我们要需改iOS项目的端口号让它从新端口获取jsbundle,否则的话会出现No bundle URL present错误。

    提示:如果你的React Native项目没有iOS模块可以忽略此步骤;

    为了方便查找这些文件并定位到端口号,你可以借助XCode的Show the Find navigator功能来查找文本8081

    9542ac40e1d6db6e87ef4b343a081b3.png

    接下就可以通过react-native run-ios来运行iOS项目并从新的端口读取jsbundle了。

    第三步:修改Android项目的端口号

    在修改了React Native 服务的端口号之后,我们要需改Android项目的端口号让它从新端口获取jsbundle,否则的话会出现No bundle URL present错误。

    提示:如果你的React Native项目没有Android模块可以忽略此步骤;

    另外,如果你的项目是源码级依赖React Native的话,也可以通过修改AndroidInfoHelpers.java文件来完成对Android项目的端口的修改。

    public class AndroidInfoHelpers {
      public static final String EMULATOR_LOCALHOST = "10.0.2.2";
      public static final String GENYMOTION_LOCALHOST = "10.0.3.2";
      public static final String DEVICE_LOCALHOST = "localhost";
    
      private static final int DEBUG_SERVER_HOST_PORT = 8081;
      private static final int INSPECTOR_PROXY_PORT = 8081;
      ...

    47677d5cf9faa5ef4ee3e6987b37bb9.png

    如何同时运行多个react native项目

    因为端口绑定的缘故,默认情况下react native是不支持同时运行多个项目的。

    如果我们要同时运行多个react native项目的话,**需要为同时运行的多个项目分配不同的端口号。**这样以来,我们就可以让react native支持同时运行多个项目了。关于如何为不同项目分配端口号,查看上文 [修改React Native监听端口](#修改React Native监听端口) 的教程即可。

    如果大家对修改React Native端口还有不明白的地方,可以在文章下方给我留言,我看到了后会及时回复的哦。
    另外也可以关注我的新浪微博@CrazyCodeBoy,或者关注我的Github来获取更多有关React Native开发的技术干货。

    告诉大家一个好消息,为大家精心准备的React Native视频教程发布了,大家现可以看视频学React Native了。

    如果,大家在开发原生模块中遇到问题可以在本文的下方进行留言,我看到了后会及时回复的哦。
    另外也可以关注我的新浪微博,或者关注我的Github来获取更多有关React Native开发的技术干货

    推荐学习:《react视频教程

    以上就是react native怎么修改端口的详细内容,更多请关注php中文网其它相关文章!

    声明:本文原创发布php中文网,转载请注明出处,感谢您的尊重!如有疑问,请联系admin@php.cn处理
    专题推荐:react native
    上一篇:react dva 怎么更改state 下一篇:react怎么实现文件转base64
    php中文网线上培训班

    相关文章推荐

    • react是软件吗• react一共有几个hooks• 声明react组件的方式有几种• react dva 怎么更改state

    全部评论我要评论

  • 取消发布评论发送
  • 1/1

    PHP中文网