React Native在开发过程中遇到的一些问题(俗称:坑)

4900

服务器地址错误

运行时产生以下错误:Could not connect to development server.

1、URL地址设置

问题:

[objc] view plain copy

  1. Could not connect to development server.
  2. Ensure the following:
  3. - Node server is running and available on the same network - run ‘npm start‘ from react-native root
  4. - Node server URL is correctly set in AppDelegate
  5. URL: http://localhost:8081/index.ios.bundle?platform=ios&dev=true
  6. 2016-08-29 17:52:29.307 [error][tid:main][RCTWebSocketManager.m:84] WebSocket connection failed with error Error Domain=NSPOSIXErrorDomain Code=61 "Connection refused"

解决:

AppDelegate.m文件中,把一下代码中的localhost改为你电脑的IP地址,并且保证连接的是同一个网络(例如:连接同一个路由的网络)。

[objc] view plain copy

  1. jsCodeLocation = [NSURL URLWithString:@"http://localhost:8081/index.ios.bundle?platform=ios&dev=true"];

2、HTTP设置

[objc] view plain copy

  1. 2016-08-29 18:01:20.273 AwesomeProject[688:263429] App Transport Security has blocked a cleartext HTTP (http://) resource load since it is insecure. Temporary exceptions can be configured via your app‘s Info.plist file.
  2. 2016-08-29 18:01:20.316 [fatal][tid:main] Could not connect to development server.
  3. Ensure the following:
  4. - Node server is running and available on the same network - run ‘npm start‘ from react-native root
  5. - Node server URL is correctly set in AppDelegate
  6. URL: http://10.240.139.46:8081/index.ios.bundle?platform=ios&dev=true

开启ATS即可

提示

摇晃设备来打开开发菜单(重新加载、调试,等等……),这跟模拟器下的命令类似(Cmd + R to reload,Cmd + D)

watchman无法启动的问题

现象:

[javascript] view plain copy

  1. watchman--no-pretty get-sockname returned with exit code 1

这个问题不影响app的运行,但是有红色的Error总感觉不好

解决方法:

修改权限

sudo chown -R `whoami` /usr/local

重新安装watchman 
brew link pcre 
brew install –HEAD watchman

brew uninstall watchman

这时可能还是会遇到以下的错误

把错误提示的那些/usr/local下的文件先删除,然后执行"brew update"

然后安装watchman: "brew install -HEAD watchman"

出现不能"symlink"的错误,按照提示执行:

这样执行后,watchman就可能正常使用了

reactNative调用原生方法的问题

按照react-native中文网上的教程,学习iOS下的原生模块(iOS 日历模块演示), 功能就是JS调用Object-C定义的方法,代码都是照抄,但是运行的时候出现以下错误,一直没找到解决办法。

后来发现OC代码的修改,如果要看效果,必须是通过Xcode运行,才能调用到原生方法,如果是在Deco中运行,就会出现上面的错误,官方文档并没有给出提示,增加大家学习的难度。

参考:

1. 在设备上运行React Native项目

2. React-Native Start的时候遇到的报错

时间: 2024-11-05 18:44:57

React Native在开发过程中遇到的一些问题(俗称:坑)的相关文章

Andriod React Native 样式表中可用样式属性

写了这么多篇Android React Native的博文,基本上把复杂的东西都搞定了,接下来来看看一些轻松的东西,和布局有关,就是css样式,那么一个View可以设置哪些css样式呢,是和web中的css样式完全一样呢,还是有所不同呢?其实你只要在样式表中书写一个不存在的样式,就会报一大堆错,提示你该样式不存在,然后提供所有可用的样式给你,如图 下面的样式就是样式表中所有可用的属性. "alignItems", "alignSelf", "backfac

3.React Native在Android中自定义Component和Module

React Native最终展示的UI全是Native的UI,将Native的信息封装成React方便的调用.那么Native是如何封装成React调用的?Native和React是如何交互的? ViewManager UI组件:将Native的UI暴露出来供JS调用. Native组件封装成JS组件供JS调用.这里的一个问题是怎么将Native中的属性用在JS中,以及属性可以有哪些类型的?可以先思考一下. 下面Native的代码自定义了一个View并定义了一个变化的属性color. publi

谈谈React Native环境安装中我遇到的坑

谈谈React Native环境安装 这个坑把我困了好久,真的是接近崩溃的边缘...整理出来分享给大家,希望遇到跟我一样问题的小伙伴能尽快找到答案. 首先,这是在初始化App之后,react-native run-android指令  报错如下: 这个问题困扰了好久,查阅了很多资料,使用各种解决办法,有的资料解决办法如下: 跟随着改变之后,再react-nativerun-android,运行结果如下: 以上的方法依然未能解决,反而报了其他的错误,然后我把文件中更改的地方复原. 下面是第二种方法

记一次开发过程中,iview遇到的一些坑以及解决办法

写在开头:本次项目采用的是vue2.0+iview3.0,最近公司没啥事,来总结一下开发过程中遇到的问题. 1.Modal关闭问题 需求背景:modal框里面是个form表单,点击确定之后,先验证form表单,验证通过则关闭modal框,验证不成功则提示用户,不关闭. 问题描述:本来刚开始想通过modal框v-model绑定的值(true或false)来进行控制,手动改之后,报错. 解决办法: 官方iview的modal组件的api里面有个loading属性,可通过控制loading的值来进行控

React Native工程中TSLint静态检查工具的探索之路

建立的代码规范没人遵守,项目中遍地风格迥异的代码,你会不会抓狂? 通过测试用例的程序还会出现Bug,而原因仅仅是自己犯下的低级错误,你会不会抓狂? 某种代码写法存在问题导致崩溃时,只能全工程检查代码,这需要人工花费大量时间Review代码,你会不会抓狂? 以上这些问题,可以通过静态检查有效地缓解! 静态检查(Static Program Analysis)主要是以不运行程序的方式对于程序源代码进行检查分析的技术,而与之相反的就是动态检查(Dynamic Program Analysis),通过实

React Native Android 从学车到补胎和成功发车经历

[工匠若水 http://blog.csdn.net/yanbober 未经允许严禁转载,请尊重作者劳动成果.私信联系我] 1 背景 好几个月没发车了,完全生疏了,为了接下来能持续性的发好车,这次先准备发个小车-- React Native.没错,就是这个从去年到现在官方都憋不出大招 1.0 版本,而被我朝开发者疯狂追捧备受争议的破车.怎么说呢,这玩意刚出来时有了解过,当时的内心是抵触的,但是内心总是架不住天朝的炒作能力,更架不住硬性指标,于是我就这么被 React Native 蹂躏了一番,也

深入浅出React Native 2: 我的第一个应用

这是深入浅出React Native教程的第二篇文章,第一篇为环境配置. React Native环境配好之后,就可以开始创建我们的第一个App啦. 打开控制台,输入 react-native init AwesomeProject 上述命令的作用是在当前文件夹下创建一个名字叫AwesomeProject的项目模板.在运行该命令之前,可以先用cd命令到自己想创建react native的文件夹下. 当然,比较坑的是,执行这个命令会用耗费很长很长的时间,有时候还会出现各种各样的错误,例如,没有权限

React native 之设置IOS的图标,名称和启动图(下篇文章会讲到RN的android的相关设置)

1.首先,app的名称: 如图所示:我的工程名叫BOOk 在BOOk下面的info.plist的文件里设置app的相关信息:比如Bundle name就是设置APP的名称 2.App的图标:(这里注意的是:1.app的图标有尺寸之分,所以如果图片的尺寸不对,编译也就会失败!2.图标的圆角是系统自己设定的,也就是说,我们上传的图片是正正方方的!) 如图:在工程文件下面的 images.xcassests的文件下是存储图片文件的地方,在IOS开发中一般是将图片放在这个位置,但是在React nati

Learning React Native笔记

React Native作为一个新事物,相关的资料还不多 官方的文档比较简单,缺少一些系统的例子 在对React Native的应用中,迫切的想学习一些别人的最佳实践.所以想通过看书系统的学习下 之前看过奇舞团翻译的React Native:用JavaScript开发移动应用,书的内容质量不太高 最近花了三天读完Learning React Native,觉得内容质量还是要好过前一本书不少的 <Learning React Native>这本书在我看来,定位也是一本入门书.目标是了解React