本文共 4160 字，大约阅读时间需要 13 分钟。
在使用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 ( something
something else ); }}); 原因：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状态栏的“沉浸式”设置无效？
例如：
经过我的尝试，hidden属性是有效，但translucent的效果没有出现。 不过有另外解决方法：
paddingTop: 20, height: 68,
2. 用这个组件时候，报了两个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 ( this._pressRow(rowData.title)}> ); } render() { return ( ); } 原因：renderRow={ this._renderRowView}，里面渲染的列里面的this不再是最外层的this，需要改成this._renderRowView.bind(this)。
4. 尺寸怎么计算，设计图到具体数值？
解决：这个可以查看 这篇文章，挺详细的。
5. 组件之间的传值怎么做？
解决：这个可以查看。
6. 怎么图片显示不完整？
代码如下（只显示部分）：
// Card视图var Card = React.createClass({ showToast: function(num: i) { ToastAndroid.show(NAMES[num].toString(), ToastAndroid.SHORT); }, // 左右留空, 中间匹配 render: function() { return ( this.showToast(this.props.num)} > ![]()
); }});// 批量创建var createCardRow = (img, i) => ;var ListViewModule = React.createClass({ render: function() { var verticalScrollView = ( {IMAGES.map(createCardRow)} ); 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做了测试：
234
实验结果是，上面图片宽度还是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应该是与平台无关的基础组件。