• 1、React native: Cannot add a child that doesn’t have a YogaNode or parent node 该错误一般是因为render方法中注释语句写法不正确,render的return函数里面的注释语句应该写在 {} 里面,而不是直接 //,正确...

    1、React native: Cannot add a child that doesn’t have a YogaNode or parent node

    该错误一般是因为render方法中注释语句写法不正确,render的return函数里面的注释语句应该写在 {} 里面,而不是直接 //,正确写法:{/*注释语句 */}

    2、make sure your bundle is packaged correctly or you’re running apackager server.

    这个大多是IP地址不对应引起的,解决方案:

    • 将设备上已安装的测试apk卸载
    • 查看电脑ip地址 在应用“Dev Settings”里面设置正确的ip地址和端口号
    • 重新运行

    3、Unable to find a matching configuration of project :react-native-fs: None of the consumable configurations have attributes.

    意思是缺少依赖库(本例缺少react-native-fs依赖库),解决方案,下载对应的依赖库,如本例npm install react-native-fs

    4、react native报failed to establish session的错误

    这里写图片描述
    我是在小米上遇到的,是小米系统的锅,去开发者选项里面,将MIUI优化关掉就行。

    5、undefined is not an object(evaluating ‘_react2.PropTypes.oneOfType’)

    原因是PropTypes的引用地址出问题了,原来PropTypes在react-native里面,现在在prop-types库里面,所以解决方案是:将原来的imprort {PropTypes} from 'react'; 改为import PropTypes from 'prop-types'; 即可!

    6、真机运行白屏,摇晃不出来开发者菜单

    解决方案请找到并打开悬浮窗权限,一般在应用管理!
    还有一个可能的原因是MainApplication里面的BuildConfig引用来源的问题,我的里面无意中将引用改为import com.facebook.react.BuildConfig;导致一些列问题,将其改为自己的包名即可!!

    7、运行Android版之后,资源文件在Android下面自动复制了一份

    原因也是上面关于引用路径的问题,将MainApplication里面的BuildConfig引用来源改为import com.facebook.react.BuildConfig;改为自己的包名即可!!

    8、error while updating property ‘src’ of a view managed by:RCTImageView3

    我的出现这个问题是Image的source里面的图片原出现错误,按照正确格式改过就ok了!

    9、react-native直接运行没问题,但是打包安装运行闪退

    我的原因是代码里面有个地方使用了View.propTypes类型检测,因为只有在开发模式下才有View.propTypes,打包后会报错

        static propTypes = {
            style: View.propTypes.style,
            inputItemStyle: View.propTypes.style,
            itemTextStyle: View.propTypes.style,
            ...
        };

    解决方案:将上面用到View.propTypes的地方删除就行!

    10、明明连接着设备,但是还是报Could not install the app on the device, …Make sure you have an Android emulator …

    这种情况一般是设备权限问题,关闭开发者模式,重新开启一下,如果设备上有提示,记得点击确定或允许即可

    11、ubuntu运行react-native开启服务时报错ENOSPC: no space left on device, watch …

    我的原因时超出了watch的监听限制,解决方案运行:echo fs.inotify.max_user_watches=524288 | sudo tee -a /etc/sysctl.conf && sudo sysctl -p即可,详见https://github.com/guard/listen/wiki/Increasing-the-amount-of-inotify-watchers#the-technical-details

    应该是npm install的时候出现了什么异常,将node_modules删除,重新install就可以啦!注意使用科学上网或者使用淘宝镜像!

    展开全文
  • 前言 公司项目 ReactNative 版本比较旧,因此想要升级。...React Native报错 unddefined is not an object(evaluating ‘_reactnative.propTypes’)。 错误原因 在给 React 16 中有一个大的改变,PropTypes的代...

    前言

    公司项目 ReactNative 版本比较旧,因此想要升级。
    升级版本为 : 0.41.1->0.55.4 。
    升级过程中遇到了一个问题。
    React Native报错 unddefined is not an object(evaluating ‘_reactnative.propTypes’)。


    错误原因

    在给 React 16 中有一个大的改变,PropTypes的代码从React中分离出来了,放在一个独立的 npm包 prop-types里。
    也就是说,之前的这种写法已经不能再使用了。
    之前的 :

    import { PropTypes } from 'react'

    需要改变为 :

    import PropTypes from 'prop-types'

    当然,有的人会说,如果是第三库直接升级第三库就可以了。有两个问题 :
    1. 有的第三方库已经不再维护了。
    2. 你能保证新版库没有什么坑爹的 Bug 吗 ? 大量的第三方库一次性升级,非常的不稳定。


    问题

    如果你的项目比较大,不仅自己的类使用到了 PropTypes , 你依赖的第三方库也使用到了 PropTypes 。该怎么办呢 ?
    比如 : 第三库 react-native-view-transformer :

    import React from 'react';
    ......
    
    ViewTransformer.propTypes = {
      enableTransform: React.PropTypes.bool,
      enableScale: React.PropTypes.bool,
      enableTranslate: React.PropTypes.bool,
      maxOverScrollDistance: React.PropTypes.number,
      maxScale: React.PropTypes.number,
      contentAspectRatio: React.PropTypes.number,
      enableResistance: React.PropTypes.bool,
      onViewTransformed: React.PropTypes.func,
      onTransformGestureReleased: React.PropTypes.func
    };

    当然你可以一个个手动去改,但是依赖库那么多,如果一个个改的话,估计人都要累死了。


    解决方法

    如果类都是自己写的话,直接全局查找 PropTypes 即可。
    而第三方库都在 node_modules 文件夹内 , 如果想要排查第三方的 PropTypes ,可以使用以下 Unix 命令 ,找出所有使用到 PropTypes 的库:
    在 node_modules 的父目录执行下列命令。

     find ./node_modules -type f -print0 | xargs -0 grep 'PropTypes' | cut -d/ -f3 | sort | uniq | xargs -I{} grep -L 'prop-types' ./node_modules/{}/package.json

    windows 可以使用 Git Bash 调用上方命令。调用结果 :

    这里写图片描述

    我们看到这些第三方库使用到了 PropTypes 。 有没有什么简单的方法,一次性改掉这些文件的 PropTypes 呢 ?

    使用 react-codemod 来重构 JavaScript 代码 。

    库地址 : https://github.com/reactjs/react-codemod

    使用方法 : (来自 react-codemod 的 issue )
    1. npm install -g jscodeshift
    2. git clone https://github.com/reactjs/react-codemod.git
    3. cd react-codemod
    4. npm install (我执行这一步的时候报错了,不过我直接忽略了…)
    5. 切换到你想要转换的目录,执行下列命令 :

    jscodeshift -t react-codemod/transforms/React-PropTypes-to-prop-types.js <path>

    第五步,我给大家举个例子 :

    以我上方的需要转换的文件为例 ,我要改动 react-native-view-transformer 文件夹下所有的类,你可以执行。

    jscodeshift -t react-codemod/transforms/React-PropTypes-to-prop-types.js    node_modules/react-native-view-transformer

    文件路径大家注意写正确哦 ! 不要直接复制粘贴。
    执行结果显示如下 :
    这里写图片描述

    意思是有1个文件转换成功了。


    总结

    升级版本的过程中,大家不免将很多代码迁移到下一代 JavaScript。

    react-codemod 有很多解决方法 ,大家可以参考下 :

    这里写图片描述

    facebook 官方也有个库 https://github.com/facebook/jscodeshift

    最后 :
    鉴于 RN 在Android 平台上糟糕的性能表现。如果你没入坑,千万不要跳进来。讲道理,修复那些 RN Bug 的时间足够我重新用原生写 Android 和 Ios 的代码。

    展开全文
  • react native报错处理...

    2019-06-21 09:59:43
    背景:最近准备在使用react-native开发的app中接入友盟,来...在修改android目录下的build.gradle等信息后,运行react-native run-android报错,错误信息如下: com.android.build.api.transform.TransformExce...

    背景:最近准备在使用react-native开发的app中接入友盟,来进行用户行为统计,分享,授权登录等操作。

    在使用的过程中,遇到了一些错误信息,在此记录一下。

    在修改android目录下的build.gradle等信息后,运行react-native run-android报错,错误信息如下:

    com.android.build.api.transform.TransformException: com.android.builder.dexing.DexArchiveBuilderException: com.android.builder.dexing.DexArchiveBuilderException: Failed to process /Users/xxx/.gradle/caches/modules-2/files-2.1/com.umeng.analytics/analytics/6.1.4/c1d30c2bbdce435b775cadca57df2098044a0f5e/analytics-6.1.4.jar

    为什么会提示这个错误了,后来经过搜索查找,发现了下面介绍:http://www.cnblogs.com/evilKing/p/4778935.html

    注释android/app/build.gradle目录下dependencies中的implementation 'com.umeng.analytics:analytics:latest.integration',重新执行编译脚本,启动正常,是什么原因导致的错误呢?

    贴出我们引入的资源:

    dependencies {
        // 代表src目录同级libs目录全部解析
        implementation fileTree(include: ['*.jar'], dir: 'libs')
        // implementation files('libs/umeng-analytics-8.0.0.jar')
        // implementation files('libs/umeng-common-2.0.0.jar')
        // implementation 'com.umeng.analytics:analytics:latest.integration'
        // implementation 'com.umeng.analytics:analytics:6.1.4'
        implementation "com.android.support:appcompat-v7:${rootProject.ext.supportLibVersion}"
        implementation 'com.facebook.react:react-native:+'
    }

    在使用友盟时,我们会下载jar包存放在src同级的libs目录下面,libs目录包含分享,授权登录等一些三方SDK文件,目录结构

    再看看dependencies下的implementation fileTree(include: ['*.jar'], dir: 'libs'),*时匹配libs目录下所有的已jar结尾的文件,等同于用过implementation引入资源,代表解析libs目录下的所有资源到文件中,因此在下面再次引入implementation 'com.umeng.analytics:analytics:latest.integration'时,会导致资源重复加载,导致打包失败。

    转载于:https://www.cnblogs.com/sk-3/p/10823129.html

    展开全文
  • 昨日打包android项目后,请求接口后数据渲染页面总是闪退,打了Debug后报如图的错误,经过查找错误发现是<View></View>之间有空格会报错 Trying to add unknown view tag,也就是说标签之间有空格或者是...

    昨日打包android项目后,请求接口后数据渲染页面总是闪退,打了Debug后报如图的错误,经过查找错误发现是 <View></View>之间有空格会报错 Trying to add unknown view tag,也就是说标签之间有空格或者是特殊符号,

    经查找代码,不知道什么时候不小心手碰到键盘了,误打了一个"`",删除之后运行正常。

    转载于:https://www.cnblogs.com/longxx/p/9321562.html

    展开全文
  • 前言:进行项目中又一个弹窗选择的功能,自己琢磨了一些,感觉自己写比较麻烦,所有准备集成一个第三方库,并选中了react-native-modal-picker 这个库。但是我在集成之后写demo的时候,发现老是报 PropTypes 的...

    前言:进行项目中又一个弹窗选择的功能,自己琢磨了一些,感觉自己写比较麻烦,所有准备集成一个第三方库,并选中了react-native-modal-picker 这个库。但是我在集成之后写demo的时候,发现老是报  PropTypes  的错误。错误如下:

         

    项目中使用的 react 和 react-native 的版本:

    错误原因:

         经过查找原因后我发现,我集成的 react-native-modal-picker 中使用了从react中引入的 PropTypes;即使用的是 React.PropTypes 来进行属性确认;但在我查看 react 官方文档后发现:PropTypes 自 React v15.5 起就被移除了,转而使用prop-types 这个三方库来进行替换。

    错误文件位置:

    属性确认的作用:

            使用 React Native 创建的组件是可以复用的,所以我们开发的组件可能会给项目组其他同事使用。但别人可能对这个组件不熟悉,常常会忘记使用某些属性,或者某些属性传递的数据类型有误。因此我们可以在开发 React Native 自定义组件时,可以通过属性确认来声明这个组件需要哪些属性,并提示传入的属性数据类型使用正确。

    注意:为了保证 React Native 代码高效运行,属性确认仅在开发环境中有效,正式发布的 App 运行时是不会进行检查的。

     

    prop-types 库使用:

    1. 安装:

            yarn add prop-types  ( npm install --save prop-types

    2. 在需要使用 react 的 PropTypes属性的地方引入即可:

            import PropTypes from 'prop-types';

    ===>>> 我这里需要在react-native-modal-picker这个库的 index.js 中引入 — node_modules中;

    另外,记得注销从react中引入的PropTypes

     

    项目中使用react-native-modal-picker报错:

    点击弹出选择框时,报错:

    解决:

    在react-native-modal-picker这个库的 index.js 中使用了 ScrollView 组件的 keyboardShouldPersistTaps属性,它使用的属性值是true,但这个值已经过去,需要用 ‘always’ 代替。

     

    参考博客:https://blog.csdn.net/allangold/article/details/78843333

                      https://blog.csdn.net/xiangzhihong8/article/details/78836136

    react中文官方文档:https://doc.react-china.org/

     

    文章仅为本人学习过程的一个记录,仅供参考,如有问题,欢迎指出

    对博客文章的参考,若原文章博主介意,请联系删除!请原谅

    展开全文
  • React Native 报错

    2019-02-27 21:42:24
    收集报错问题 一. TransformError: Unexpected token错误 这与babel-preset-react-native模块有关。尝试运行, yarn remove babel-preset-react-native yarn add babel-preset-react-native@2.1.0 或者如果您使用...
  • 问题复现: 打包生成用rn写的apk安装在手机上之后,首次进入APP之后没...查找了相关命令之后用adb logcat AndroidRuntime:E *:S来打印出错误,发现是内存泄露的问题。 PS G:\RN1workspace\TigerGameApp> ad...
  • 我和小伙伴同时按照官网搭建环境,但是人家都一步就好了,只有我花了3天的时间才搭建好,真的是遇到了各种坑,废话不多说,遇到同样问题的亲可以少花店时间在上面...1.2启动报错: VBox 启动虚拟机失败 - NtCreateF
  • 1 前言最近打算真的开始学习一下跨平台APP开发,一直在关注RN,因此也打算真的开始学习下(其实是笔者的公司也开始有这种跨平台的需求了,笔者在一家传统公司)。...需要的开发环境主要有node.js + react native +
  • 个人意见:集成第三方库最好不要制定固定的版本,因为可能会和你的react native版本不相符,导致报错!!! 这篇文章主要记录一些 react-native-image-crop-picker 和 react-native-image-zoom...
  • React Native组件只Image

    2016-12-10 13:16:13
    不管在Android还是在ios原生...静态图片资源从0.14版本开始,React Native提供了一个统一的方式来管理iOS和Android应用中的图片。要往App中添加一个静态图片,只需把图片文件放在代码文件夹中某处,然后像下面这样去引
  • react native运行打包报错及解决办法Could not resolve all dependencies for configuration ‘:classpath’报错原因: 构建时,react native 会检查是否有gradle-3.0.0。首先会在本地查找,如果没有,接着会在...
  • 在升级Xcode11之后,使用低于0.59.9版本的React Native,启动时必将出现问题: 模拟器运行报红如下: Xcode运行错误如下: 2019-09-25 15:16:47.784 [error][tid:main][RCTModuleMethod.mm:376] Unknown ...
  • 前几天受同事之拖,在ReactNative环境下,引用阿里云直播sdk,本以为是一个很简单的问题,结果确踩了个大坑。 阿里云直播sdk 地址阿里云直播sdk地址 大概就是下图这种情况,大概意思就是说ReactNative里有这个.so...
  • (一)前言 今天我们一起来看一下Image组件的... 刚创建的React Native技术交流群(282693535),欢迎各位大牛,React Native技术爱好者加入交流!同时博客左侧欢迎微信扫描关注订阅号,移动技术干货,精彩文章技术推送! Imag
  • ReactNative工作原理

    2017-09-26 18:31:20
    React Native应用开发实例解析》React的起源React,这个用于构建用户界面的JavaScript库,就是React Native的核心。为了理解React,先要熟悉几个概念。第一个概念,声明式编程范式(范式就是计算机程序架构与组件...
  • 下载了一个rn的项目,运行react-native run-android出现了如下错误: 错误: 找不到或无法加载主类 org.gradle.wrapper.GradleWrapperMain Could not install the app on the device, read the error above for ...
  • 使用官方推荐的webview 报错问题 1.迁移到 androidx后 android.support.v4.content.FileProvider找不到问题 androidx.core.content.FileProvider 2. 报关于RequiresApi找不到的问题。修改
  • 本文出自《React Native学习笔记》系列文章。 在做React Native开发时,少不了的需要对React Native程序进行调试。调试程序是每一位开发者的基本功,高效的调试不仅能提高开发效率,也能降低Bug率。本文将向大家分享...
1 2 3 4 5 ... 20
收藏数 821
精华内容 328