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状态栏的“沉浸式”设置无效？

例如：

<StatusBar
     backgroundColor='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 (
 <TouchableHighlight
 underlayColor='#c8c7cc'
 onPress={  => this._pressRow(rowData.title)}>
 </TouchableHighlight>
 );
     }
     render {
 return (
 <ScrollView>
 <ListView
 dataSource={this.state.dataSource}
 renderRow={ this._renderRowView}/>
 </ScrollView>
 );
     }

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

4. 尺寸怎么计算，设计图到具体数值？

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

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

6. 怎么图片右边框不见了？

代码如下（只显示部分）：

// Card视图
var Card = React.createClass({
  showToast: function(num: i) {
    ToastAndroid.show(NAMES[num].toString, ToastAndroid.SHORT);
  },

  // 左右留空, 中间匹配
  render: function {
    return (
      <TouchableOpacity
        style={styles.button}
        onPress={ => this.showToast(this.props.num)}
      >
        <Image
 style={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 = (
      <ScrollView
        style={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应该是与平台无关的基础组件。

本文为原创文章，转载请保留原出处，方便溯源，如有错误地方，谢谢指正。