1.webpack使用babel-loader后编译报错

报错
ERROR in ./entry.js Module build failed: SyntaxError: /Users/yixin/Desktop/react/entry.js: Unexpected token (2:8)

说是 "<" 这个符号有问题,原因是babel6分离为多个包,并且默认不支持react和es2015。
因此除了npm install babel-loader --save-dev以外还需要
npm install babel-preset-es2015 babel-preset-react --save-dev
然后在loaders中添加:

var babelPresets = {presets: ['react', 'es2015']};

   loaders: [
{
test: /\.js|jsx$/,
loaders: ['babel', 'babel-loader?'+JSON.stringify(babelPresets)]
}
]

则可以正常运行。


2.Target container is not a DOM element

 找不到dom节点:

    Uncaught Invariant Violation: _registerComponent(...): Target container is not a DOM element.

原因是js在头部引入,由于src是同步下载,然后立即执行,而此时你的渲染树还未构建完毕,因此找不到dom节点。解决方法是在页面底部进行调用。


3.Super expression must either be null or a function, not undefined

我是按照之前买的用JavaScript开发移动应用的例子来编写的,然后报了这个错。我的头部声明是这样的

var React = require('react-native');
var {
Text,
View
} = React;

经过查询后是由于'React'和'Component'从'react native'分离到了'react'模块。所以这里我们只引入'react native'的模块是不够的,改成这样:

import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View
} from 'react-native';

成功运行。另外推荐RN的ES5和ES6的语法对照表,作为初学者还是很有必要了解的
React/React Native 的ES5 ES6写法对照表

后面还会持续更新。。。


4.ReactNative 安卓环境 Could not resolve all dependencies for configuration ':app:_debugCompile'

问题如下:

* What went wrong:
A problem occurred configuring project ':app'.
> Could not resolve all dependencies for configuration ':app:_debugCompile'.
> Could not find com.android.support:support-v4:23.2.1.
Searched in the following locations:
file:/Users/yixin/.m2/repository/com/android/support/support-v4/23.2.1/support-v4-23.2.1.pom
file:/Users/yixin/.m2/repository/com/android/support/support-v4/23.2.1/support-v4-23.2.1.jar

需要在sdk管理器中安装 Android Support Repository模块


5.ReactNative 安卓环境 Execution failed for task ':app:installDebug'.

问题如下:

* What went wrong:
Execution failed for task ':app:installDebug'.
> com.android.builder.testing.api.DeviceException: com.android.ddmlib.InstallException: device '76UBBKT22AZQ' not found

需要更改android的build.gradle,将第8行gradle的版本号更改为1.2.3
classpath 'com.android.tools.build:gradle:1.2.3' 就可以正常运行了。


6.安卓模拟器运行报错 emulator: ERROR: x86 emulation currently requires hardware acceleration!Please ensure Intel HAXM is properly installed and usable.CPU acceleration status: HAXM must be updated (version 1.1.5 < 6.0.1).

解决办法:在sdkTools安装Intel x86 Emulator Accelerator(HAXM installer)的情况下,

访问sdk目录下的extra->intel->Hardware_Accelerated_Execution_Manager下执行intelHAXM.dmg,重启android studio可以正常运行模拟器


7.reactNative getInitialState: function() {}报错

原因:在ES5语法下,React Native 组件的状态变量是在 getInitialState函数中初始化的

let MyComponent = React.createClass({
getInitialState: function() {
return {
scrollTop: new Animated.Value(0),
};
},
});

而在ES6语法下,React Native 团队修改了状态变量的初始化方式,取消了单独的 getInitialState 函数,将初始化放在构造函数中,并提供 this.state实例变量用来存储状态变量。
解决办法:

class MyComponent extends React.Component {
constructor(props) {
super(props);
this.state = {
scrollTop: new Animated.Value(0),
};
}
}


7.React Native在android和ios平台上的差异

  1. 当Text组件的fontSize等于height的时候,由于安卓和ios在Text组件中上方都自动留白,这时候会发现底部已经超出了组建范围而被遮挡。如果想设置Text垂直居中的效果建议可以用View做嵌套再通过flex布局来做到垂直居中

import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View,
Image
} from 'react-native';
var aImage = require('./tab.png');
class reactNative06 extends Component { render() {
return (
<View style={styles.container}>
<View style={{borderWidth:1,}}>
<Text style={styles.welcome}>
Ajfg你好
</Text>
</View>
</View>
);
}
} const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
welcome:{
width:200,
fontSize:50,
borderWidth:1,
textAlign:'center'
}
}); AppRegistry.registerComponent('reactNative06', () => reactNative06);
  1. borderWidth属性在Android的Text组件上失效,解决办法也如上段代码一样使用View嵌套然后在View组建上添加borderWidth属性

  2. TextInput组件通过multiline={true}设置为多行后,在iphone手机上TextInput组件的onSubmitEditing事件永远不会被处罚,它的回调函数也不会被执行,而安卓上正常。当TextInput失去焦点的时候建议选择onEndEditing回调函数而不是onBlur


8.TextInput组件文字被遮挡

先说下TextInput在android和ios两个平台的区别。

  1. 只指定fontSize不指定height:
    在iOS平台上,没有指定样式中的height键值的TextInput组件不会显示。在android平台上则为正常

  2. height等于fontSize:
    android平台上字体的上方有部分会被遮挡,在iOS平台上底部会稍微有点被遮挡,这时候可以设置paddingTop:0,paddingBottom:0来解决。

  3. height大于fontSize,有时候也会有遮挡,解决办法如上


9.安装app报错:signatures do not match the previously installed version; ignoring!

reactnative新签名的apk在手机上安装不了(是因为之前调试的应用没删干净)

解决办法:adb uninstall "com.pepperrn" 手动通过包名来清理app。
然后再安装就正常了


10.ReactNative调试模式下正常,release版本本地图片显示不出来

问题描述:ReactNaitve调试模式下运行正常,打包release版本时没将静态资源文件打包进去,导致本地图片加载不出来
解决办法:可以将android目录删除掉然后运行react-native android,重新构建安卓目录,再打包恢复正常。

react-native 常见问题的更多相关文章

  1. React Native 常见问题集合

    在使用React Native时候,我记录下比较常遇到的问题,分为以下几类: 1. 调试问题 2. 写法问题 3. 疑难问题 4. 奇怪问题 调试问题 1. 在react-native run-and ...

  2. 【RN - 基础】之React Native常见问题及解决方案

    unable to load script from assets index.android.bundle... 问题原因: 找不到Android项目中的assets文件夹. 解决方案: 1.在An ...

  3. react native的环境搭建中常见问题

    搭建完成android的环境,我们就可以继续我们的react native环境的搭建了. 当然,按照fb的安装流程来完成rn的搭建. http://facebook.github.io/react-n ...

  4. React Native填坑之旅--ListView篇

    列表显示数据,基本什么应用都是必须.今天就来从浅到深的看看React Native的ListView怎么使用.笔者写作的时候RN版本是0.34. 最简单的 //@flow import React f ...

  5. 携程React Native实践

    React Native(下文简称 RN)开源已经一年多时间,国内各大互联网公司都在使用,携程也在今年 5 月份投入资源开始引入,并推广给多个业务团队使用,本文将会分享我们遇到的一些问题以及我们的优化 ...

  6. React native开发中常见的错误

    react native环境搭建请移步:react native环境搭建 这里说说react native创建完成之后,运行中出现的常见问题, 问题1: java.lang.RuntimeExcept ...

  7. 搭建开发环境(React Native)

    来源:http://reactnative.cn/docs/0.31/getting-started.html 在GitHub上修改这篇文档 欢迎使用React Native!这篇文档会帮助你搭建基本 ...

  8. 初学 React native | 环境搭建(在模拟器上运行)

    我的电脑是windows 所以就以 windows上+Android 配置React native 环境 网上的安装教程非常多,我总结了一下,配置环境时出错原因主要是node java python ...

  9. React Native 之 Text的使用

    前言 学习本系列内容需要具备一定 HTML 开发基础,没有基础的朋友可以先转至 HTML快速入门(一) 学习 本人接触 React Native 时间并不是特别长,所以对其中的内容和性质了解可能会有所 ...

  10. React Native环境配置之Windows版本搭建

    接近年底了,回想这一年都做了啥,学习了啥,然后突然发现,这一年买了不少书,看是看了,就没有完整看完的.悲催. 然后,最近项目也不是很紧了,所以抽空学习了H5.自学啃书还是很无趣的,虽然Head Fir ...

随机推荐

  1. 立下flag!

    从今日(2020年6月29日)开始,直到两个月的暑假结束2020年8月31日,每天vp一场div3,至少要ac4道题目.

  2. 一文了解Zookeeper

    Zookeeper是Apache开源的一个分布式框架,它主要为分布式应用提供协调服务. Zookeeper主要负责存储和管理大家都关心的数据,一旦这些数据的状态发生变化,Zookeeper就会通知那些 ...

  3. jpa基础知识掌握-分页-sql

    https://blog.csdn.net/liuchuanhong1/article/details/52042477

  4. 电商订单ElasticSearch同步解决方案--使用logstash

    一.使用logstash同步订单数据(订单表和订单项表)到ElasticSearch: 1.到官网下载logstash:https://www.elastic.co/cn/downloads/logs ...

  5. 【SCOI2016】背单词

    P3294[SCOI2016]背单词 [提示] 这道题大概是告诉我们,让我们用一堆n个单词安排顺序,如果当前位置为x,当前单词的后缀没在这堆单词出现过,代价就为x,这里的后缀是原意,但不算自己(不算本 ...

  6. 记一次ElementUI源码修改过程

    修改目的 使用ElementUI el-tree过程发现选中节点,键盘移动上下键时(key down\key up)el-tree默认高亮移动的节点,业务上需要重写此事件. ​从官网发现该事件没有暴露 ...

  7. Java知识系统回顾整理01基础06数组06二维数组

    一.一维数组和二维数组 这是一个一维数组, 里面的每一个元素,都是一个基本类型int int a[] =new int[]{1,2,3,4,5}; 这是一个二维数组,里面的每一个元素,都是一个一维数组 ...

  8. USB口,串口,以太网口简介

    USB口 一.什么是USB? USB是英文Universal Serial Bus的缩写,中文含义是"通用串行总线".它是一种应用在PC领域的新型接口技术.早在1995年,就已经有 ...

  9. JVM内存布局(又叫Java运行时数据区)

    JVM 堆中的数据是共享的,是占用内存最大的一块区域. 可以执行字节码的模块叫作执行引擎. 执行引擎在线程切换时怎么恢复?依靠的就是程序计数器. JVM 的内存划分与多线程是息息相关的.像我们程序中运 ...

  10. Hadoop理论基础

    Hadoop是 Apache 旗下的一个用 java 语言实现开源软件框架,是一个开发和运行处理大规模数据的软件平台.允许使用简单的编程模型在大量计算机集群上对大型数据集进行分布式处理.   特性:扩 ...