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居然代码表现不一致也是让人意想不到
扩展符使用错误，报错方式和别的错误报错不一样也是出人意料
然后就是，二分法虽然看似笨拙，但是其实对于排错来说，还是很实用的
本次踩坑完毕，我会向着新坑继续前进