React Native 常见问题集合

在使用React Native时候,我记录下比较常遇到的问题,分为以下几类:

1. 调试问题

2. 写法问题

3. 疑难问题

4. 奇怪问题

调试问题

1. 在react-native run-android运行后,真机上打开的空白页面。

我测试机是红米2A(Android 4.4.4),在调试时,发现没有reload的菜单栏,也没有日志出现。

原因:需要到应用->权限管理->显示悬浮窗打开,这样才可以查看错误日志。

2. 打成的apk安装包安装后, 替换的图片(应用icon)没有变,还是旧图片?

原因:这应该是你机器本来就安装过测试包了,有了缓存,重启下机器就可以了。

3. 怎么进行js调试?

解答:可以在代码里面写一个debugger,然后在手机上点击"start remote js debugging",这是会自动打开一个Chrome页面,打开开发者控制台。当代码经过debugger时候,即可调试。

写法问题

1. Application simpleAPP has not been registered. This is either due to a require() error during initialization or failure to call AppRegistry.registerComponent.

原因: AppRegistry.registerComponent('testProject', () => RnListView);   这一句,要看testProject这个参数有没有写对,是不是跟应用名一样(你初始化的应用名)。

2. Adjacent JSX elements must be wrapped in an enclosing tag.

例如:

  render: function() {return (<h1>something</h1><div>something else</div>
    );}
});

原因:React element can return only one element. 官方有Q&A说明,只能返回一个element,上面返回了两个element。

3.  图片加载不了?

例1:

var localImg = "./images/demo/newsImg2.png";
require( localImg );

例2:

require( "./images/demo/newsImg2.png");

第一种情况加载不了。

原因:为了使新的图片资源机制正常工作,require中的图片名字必须是一个静态字符串,这是React规定。

4. 为什么要这样写onPress={ () => this.goback() } ,而不是onPress={  this.goback } ?

原因:我认为是为了保持goback函数里this的指向。

疑难问题

1. Android状态栏的“沉浸式”设置无效?

例如:

<StatusBarbackgroundColor='blue'translucent  = {true}
/>

经过我的尝试,hidden属性是有效,但translucent的效果没有出现。  不过有另外解决方法:

在styles.xml加上:
     <style name="ImageTranslucentTheme" parent="Theme.AppCompat.Light.NoActionBar"> <item name="android:windowTranslucentStatus">true</item> <item name="android:windowTranslucentNavigation">true</item> </style> 
在manifest的activity加上:
android:theme="@style/ImageTranslucentTheme"
然后在每个页面的Header都要相应加多高度来适应:
paddingTop: 20,  
height:  68, 

2. react-native-gifted-listview 用这个组件时候,报了两个warning!

(1). In next release empty section headers will be rendered. In this release you can user 'enableEmptySections' flag to render empty section headers.

解决:找到node_modules下的react-native-gifted-listview,在ListView下 加个 enableEmptySections = {true} 就可以解决了。

(2). Circular indeterminate 'ProgressBarAndroid' is deprecated. Use 'ActivityIndicator' instead.

解决:找到node_modules下的react-native-gifted-spinner,修改组件。

PS:这个组件开发者没有及时更新。

3. TouchableHighlight的onPress事件无效,总报“undefined is not a function”?

例如:

  _pressRow(title){Alert.alert( 'Alert Title', "fuck",[{ text: 'OK', onPress: () => console.log('OK Pressed!')}])}_renderRowView(rowData) {return (<TouchableHighlightunderlayColor='#c8c7cc'onPress={ () => this._pressRow(rowData.title)}></TouchableHighlight>
          );}render() {return (<ScrollView><ListViewdataSource={this.state.dataSource}renderRow={ this._renderRowView}/></ScrollView>
          );}

原因:renderRow={ this._renderRowView},里面渲染的列里面的this不再是最外层的this,需要改成this._renderRowView.bind(this)。

4. 尺寸怎么计算,设计图到具体数值?

解决:这个可以查看https://segmentfault.com/a/1190000002658374 这篇文章,挺详细的。

5. 组件之间的传值怎么做?

解决:这个可以查看http://blog.csdn.net/gz_jero/article/details/51531247。

6. 怎么图片显示不完整?

代码如下(只显示部分):

// Card视图
var Card = React.createClass({showToast: function(num: i) {ToastAndroid.show(NAMES[num].toString(), ToastAndroid.SHORT);},// 左右留空, 中间匹配render: function() {return (<TouchableOpacitystyle={styles.button}onPress={() => this.showToast(this.props.num)}><Imagestyle={styles.image}resizeMode={'cover'}source={this.props.img}/></TouchableOpacity>
    );}
});// 批量创建
var createCardRow = (img, i) => <Card key={i} img={img} num={i}/>;var ListViewModule = React.createClass({render: function() {var verticalScrollView = (<ScrollViewstyle={styles.container}>{IMAGES.map(createCardRow)}</ScrollView>
    );return verticalScrollView;}
});var styles = StyleSheet.create({container: {flex: 1,},button: {justifyContent: 'space-between',alignItems: 'center',flexDirection: 'row',margin: 10,},image: {flex: 1,height: 200,borderRadius: 5,borderWidth: 2,borderColor: '#FF1492',},blank: {width: 10,}
});

原因:当图片没有设置width具体数值,弹性布局并不会将图片自适应到整个容器宽度,而是按着图片本身大小显示。

简单说就是图片不能用flex设置宽度。(这个原因是我的猜想)

我在Web做了测试:

 <div style="width:200px;flex:'flexDirection';"><img src="F:\workspace_react\testProject\list_view_module\images\jessicajung.png" style="flex:1"/><div style="flex:1">234</div></div>

实验结果是,上面图片宽度还是732px,而下面的div是200px。

奇怪问题

1. 页面变得可以左右拖动,可以看到一片空白。

原因:当Navigator组件设置的转场动画是Navigator.SceneConfigs.HorizontalSwipeJump,那就会导致一个神奇的效果,页面可以左右拖动,看到一片空白区域(这个效果我觉得慎用)。

2. Github上有时有些库按命令装不了。

在安装库时候,发现了奇怪的现象。有时安装时,安装会报错。

解决:尝试加上--save或者删除--save就可以了!

3. 为什么要从react-native、react两个不同地方important组件? 

例如:

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

react-native应该是包含原生组件部分,而React应该是与平台无关的基础组件。

 

 

本文为原创文章,转载请保留原出处,方便溯源,如有错误地方,谢谢指正。
本文地址 :http://www.cnblogs.com/lovesong/p/5679340.html

转载于:https://www.cnblogs.com/lovesong/p/5679340.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/256784.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

学习笔记(57):Python实战编程-Treeview

立即学习:https://edu.csdn.net/course/play/19711/343120?utm_sourceblogtoedu 1.树状结构Treeview:分为树状折叠式列表和列表显示&#xff0c;是一种很重要数据列表展示的形式 2.树状列表建立步骤&#xff1a; 1&#xff09;创建一个树状列表&#xff1a;在这里可以设置显示…

验证VSPHERE5 支持大于2TB磁盘

VSPHERE5 使用GTP格式的分区表&#xff0c;文件系统类型为VMFS5.X&#xff0c;直接支持大于2TB的磁盘分区&#xff0c;相对于VSPHERE4不同 vsphere4使用MSDOS格式的分区表&#xff0c;文件系统类型为VMFS3.X 而vsphere5 block块大小统一为1MB&#xff0c;而不是vsphere4的多种格…

Java Inner Class 内部类

内部类 Inner Class 一个内部类可以定义在另一个类里&#xff0c;可以定义在函数里&#xff0c;甚至可以作为一个表达式的一部分。 Java中的内部类共分为四种&#xff1a; 静态内部类static inner class (also called nested class) 成员内部类member inner class 局部内部类l…

现代制造工程笔记01:课程安排

电子教材&#xff1a;http://www.bookask.com/read/4588.html

22个值得收藏的android开源码-UI篇

本文介绍了android开发人员中比較热门的开源码&#xff0c;这些代码绝大多数能够直接应用到项目中。FileBrowserView 一个强大的文件选择控件。界面比較美丽&#xff0c;使用也非常easy。 特点&#xff1a;能够自己定义UI&#xff1b;支持复制、剪切、删除、移动文件&#xff1…

现代制造工程02:第一部分——刀具(含2个易考点)

一、金属切削原理 可以看出哪些性能参数是同向性得&#xff0c;并且知道性能参数与三要素有什么关系 易考点&#xff1a;三个变形区 易考点&#xff1a;磨损种类以及磨损阶段、磨顿标准

iOS开发之share第三方登录以及分享

&#xff08;1&#xff09;官方下载ShareSDK iOS 2.8.8&#xff0c;地址&#xff1a;http://sharesdk.cn/ &#xff08;2&#xff09;根据实际情况&#xff0c;引入相关的库&#xff0c;参考官方文档。 &#xff08;3&#xff09;在项目的AppDelegate中一般情况下有三个操作&am…

有限元课堂笔记03:钢架(Frame)

1.平面钢架(Frame)&#xff1a;是桁架(Truss)和梁(Beam)的合成&#xff0c;两节点六自由度 2.空间钢架&#xff1a;两节点12自由度 相对于平面钢架来说每一个节点增加了z轴线性变形、绕x轴扭矩&#xff0c;绕y轴扭矩 刚度矩阵

Docker新手入门:基本用法

Docker新手入门&#xff1a;基本用法 1.Docker简介 1.1 第一本Docker书 工作中不断碰到Docker&#xff0c;今天终于算是正式开始学习了。在挑选系统学习Docker以及虚拟化技术的书籍时还碰到了不少麻烦&#xff0c;主要就是没有特别经典的书&#xff01;Docker的《第一版Docker书…

有限元笔记04:二维实体单元

1.二维实体即平面问题 创建单元的步骤&#xff1a; 型函数&#xff08;插值函数&#xff09;>>>应变矩阵>>>刚度矩阵>>>质量矩阵>>>力的分量 1&#xff09;三角形单元 2&#xff09;面坐标 3&#xff09;线性矩形单元 4)高斯积分 6)任意…

线程与内核对象的同步-2

等待定时器内核事件 CreateWaitableTimer( PSECURITY_ATTRIBUTES psa, BOOL fManualReset, PCTSTR pszName); 进程可以获得它自己的与进程相关的现有等待定时器的句柄。 HANDLE OpenWaitableTimer( DWORD dwDesiredAccess, BOOL bInheritHandle, PCTSTR pszName); 等待定时器对…

【Win10 应用开发】自定义应用标题栏

Win 10 app对窗口标题栏的自定义包括两个层面&#xff1a;一是只定义标题中各部分的颜色&#xff0c;如标题栏上文本的颜色、三个系统按钮&#xff08;最大化&#xff0c;最小化&#xff0c;关闭&#xff09;的背景颜色等&#xff1b;另一层是把窗口的可视区域直接扩展到标题栏…

学习笔记(59):Python实战编程-Graphics

立即学习:https://edu.csdn.net/course/play/19711/343123?utm_sourceblogtoedu 1.graphics&#xff1a;图形界面组件的绘制&#xff0c;利用的是坐标的定位来对各个组件进行相对地位置布局 2.graphics与thinkter的区别 1&#xff09;窗口的创建上&#xff1a; win graphics…

IIS6配置Asp.net MVC运行环境

Windows server 2003 IIS6 搭建Asp.net MVC运行环境 1、安装.Net Framework4.0。 下载地址&#xff1a; http://www.microsoft.com/zh-cn/download/details.aspx?id17718 2、安装WindowsServer2003-KB968930-x86-CHS.exe&#xff0c;PowerShell 2.0的补丁 下载地址&#xff1…

最优化课堂笔记04:非线性规划(考点4-5例题)

目录 4.1 多元函数的泰勒展开 4.2方向导数与梯度 4.2.1方向导数 n元函数在点沿特定方向的方向导数 4.2.2梯度 4.3二次函数及正定矩阵 4.4凸函数与凸规划 4.4.1凸函数 4.4.2凸规划 4.4无约束优化问题的极值条件 4.5约束优化问题的极值条件&#xff08;重点考点&#x…

orb-slam2在PC和ARM上运行

ORBSLAM2的编译与运行 环境&#xff1a;Ubuntu16.04 ORBSLAM2 &#xff08;1&#xff09;安装工具 sudo apt-get install cmake sudo apt-get install git sudo apt-get install gcc g (2) 安装pangolin 安装依赖项&#xff1a; sudo apt-get install libglew-dev sudo ap…

烂泥:智能DNS使用与配置

公司的业务现在已经扩展到海外&#xff0c;对外提供的统一接口都是通过域名来解析的&#xff0c;但是海外用户访问国内接口的话&#xff0c;你懂的&#xff0c;很慢的。为了提高域名解析的速度&#xff0c;打算使用智能DNS功能&#xff0c;来解决海外用户域名解析慢的问题。 PS…

现代制造工程——考试复习01

第一部分 金属切削原理 1.切削过程中工件上的加工表面分类 2.不同工艺的工件和刀具的相对关系 3.不同工艺的主运动和进给运动的方向 4.思考&#xff1a;主运动一般只有一个&#xff0c;但是进给运动一个也可以是多个 5.切削三要素&#xff08;必考&#xff09; 6.思考&#x…