React Native 踩坑记录 “Unexpected token '...'. Expected a property name. (http://localhost:8081/index.d”

Unexpected token '...'. Expected a property name. (http://localhost:8081/index.delta?platform=android&dev=true&minify=false:154872）

这个问题似乎不是很常见，因为我自己搜索了一圈发现并没有太多关于这个报错的文章，也可能是这种低级错误大家都不屑于犯吧……

=======================我是友好的分割线====================================================

昨天临下班，本来说打个APK，丢给领导检查就算完了，没想到……

安装、打开、闪退

安装、打开、闪退

嗯？

嗯嗯？？

刚才在Degbug模式下没有问题啊……

于是重打开模拟器，进入debug程序，没有任何报错啊？

本着编程世界没有神话故事的态度，我决定找到原因

 

把模拟器上的debug版本删掉，重新运行

$ react-native run-android

 嗯，看到报错了

 这个报错还真的和以前那些妖艳jian货不一样……没有报错堆栈，没有行数或者文件提示，鬼知道你混缩代码以后154872行到底是个啥……

不过有报错总好过没报错，于是我摇一摇后，打开了Debug JS Remotely，想要看看调试模式会不会给我更多信息

然而，见鬼的事情发生了

打开Debug JS Remotely以后，

应用正常运行，

报错消失了……

消失了……

了……

关闭Debug JS Remotely

报错又出现了……

出现了……

了……

好吧，这一定是React Native本身的坑，作为新人菜鸟的我没能力去弄明白这里边的区别了……

只能先按照国际惯例，遇到报错，google之,baidu之，咦？怎么似乎大家都没遇到过这个问题？少有的几个也和我遇到的情况似乎不太一样。。。

因为我整个应用是使用react-native-router-flux进行路由管理的，app.js里就一个路由组件，而路由会在初始化的时候就把所有页面都加载进来，所以也不知道究竟是哪一个文件出了问题

 不过，一眼判断不出来不代表咱们没办法，对不对

二分法永远是最高效的拍错方法之一

于是，我用二分法禁用了Router中加载的Scene，终于把问题定位在两个文件上

打开这两个文件，整体看下来，没发现什么问题

老办法，二分法，这次是注释掉Import部分，然后看对应报错是否改变（如果注释掉没问题的引用，则会报not found valid XXX的错）

于是终于定位到是我自己写个一个AgreeItem组件出了问题

以下是这个组件的代码

import React, { Component } from "react";
import { View, Image, StyleSheet, Text } from "react-native";
import { rem } from "../../util/layout/rem";
import { icon_checked, icon_unchecked } from "../../res/icon";
import PropTypes from "prop-types";

export default class AgreeItem extends Component {
  constructor(props){
    super(props)
    this.state = {}
  }
  static PropTypes = {
    uncheckedIcon: PropTypes.element,
    checkedIcon: PropTypes.element,
    onChange: PropTypes.func,
    style: PropTypes.object,
    checked: PropTypes.bool.isRequired
  }

  handleOnChange = () => {
    this.props.onChange && this.props.onChange()
  }
  
  renderCheckIcon = () => {
    const { checked } = this.props
    const uncheckedIcon = this.props.uncheckedIcon? <Text onPress={this.handleOnChange}>{this.props.uncheckedIcon}</Text>: <Text onPress={this.handleOnChange}><Image source={icon_unchecked} style={styles.icon}/></Text>
    const checkedIcon = this.props.checkedIcon? <Text  onPress={this.handleOnChange}>{this.props.checkedIcon}</Text>: <Text onPress={this.handleOnChange}><Image source={icon_checked} style = {styles.icon}/></Text>
    console.log(checked)
    const icon = checked? checkedIcon: uncheckedIcon
    return icon
  }

  render(){
    return (
      <View style={[styles.container,this.props.style]} key={this.props.key}>
        <View style={styles.childrenContainer}>{...this.props.children}</View>
        <View style={styles.iconContainer}>{this.renderCheckIcon()}</View>
      </View>
    )
  }
}

问题已经很明了了

就是

{...this.props.children}

 这里出个问题，按我之前的想法，当然是要把所有的children展开在这里边的，然而似乎RN不这么想……

把扩展符去掉报错就没有了，应用重新正常运行

 

============================我是总结的分割线=====================================

总结一下，RN坑的确很多……开关Debug JS Remotely居然代码表现不一致也是让人意想不到

扩展符使用错误，报错方式和别的错误报错不一样也是出人意料

然后就是，二分法虽然看似笨拙，但是其实对于排错来说，还是很实用的

本次踩坑完毕，我会向着新坑继续前进