[英]react native chrome debugger breaks the application
I have a react-native sample which works fine in simulator. 我有一个本机示例,可以在模拟器中正常工作。 But when I try to debug it in the chrome, it stops working. 但是,当我尝试在chrome中调试它时,它将停止工作。
I am using Navigator, first page is a greeting, which works fine. 我正在使用导航器,第一页是一个问候,效果很好。 When I enable debug, the behavior is like this : Go to the first page, every thing is fine. 当我启用调试时,行为是这样的:转到第一页,一切都很好。 Click on enter button to enter the app, I can see the messages from my render function in chrome, but there is no visual change Click again on the same button, give erros : many 单击输入按钮进入应用程序,我可以在chrome中查看来自我的渲染功能的消息,但是没有视觉上的变化。再次单击同一按钮,出现错误:
Warning: flattenChildren(...): Encountered two children with the same key,
.0:$0
. 警告:flattenChildren(...):遇到两个具有相同键.0:$0
孩子。 Child keys must be unique; 子密钥必须唯一。 when two children share a key, only the first child will be used. 当两个孩子共享一个密钥时,将仅使用第一个孩子。
And at the end 最后
Exception 'shadowView (for ID 19) not found' was thrown while invoking replaceExistingNonRootView on target RCTUIManager with params ( 19, 446 ) 使用参数(19,446)调用目标RCTUIManager上的replaceExistingNonRootView时引发了异常“ shadowView(针对ID 19)”
The component that might cause the error is as follows ( it is a chess board) 可能导致错误的组件如下(它是国际象棋棋盘)
var Dimensions = require('Dimensions');
var fen = require('../logic/fen');
var windowSize = Dimensions.get('window');
import React, {
AppRegistry,
Component,
TouchableHighlight,
StyleSheet,
Text,
View
} from 'react-native';
const Square = require('./square');
const Piece = require('./piece.component');
const CONSTANTS = require('./constants');
var squares = [];
var pieces = [];
var createRow = function(i, width) {
for (let j = 0; j < 8; j++) {
squares.push(<Square width={width} key={i*10+j} row = {i} column = {j} onSquareSelected = {this.squareSelected}></Square>
);
}
}
var createBoard = function(width) {
for (let i = 0; i < 8; i++) {
createRow(i, width);
}
};
const Board = React.createClass({
componentWillMount() {
this.pieceWidth = this.props.width/8;
createBoard(this.pieceWidth);
this.createPieces();
},
createPieces(){
console.log('Creating pieces');
let pieceDefinitions = fen.read(fen.initial);
pieces = [];
var key = 0;
for(let p in pieceDefinitions){
key = key +1 ;
console.log('piece key is ' + key)
pieces.push(
<Piece key={key} width ={this.pieceWidth} coordinate={p} color = {pieceDefinitions[p].color}
role = {pieceDefinitions[p].role}>
</Piece>
)
}
return pieces;
},
squareSelected(row, column) {
console.log("Row", row, "Column", column, "selected");
},
getInitialState() {
return { selectedPiece: null }
},
render() {
return (
<View style={[styles.container, {width : this.props.width ,height: this.props.width}]}>
{squares}
{pieces}
</View>
)
}
});
const styles = StyleSheet.create({
container: {
marginTop : 20,
backgroundColor: '#F5FCFF',
flexDirection: 'row',
flexWrap: 'wrap',
}
})
module.exports = Board;
Apparently any RN code that uses let
breaks completely in the Chrome debugger. 显然,所有使用let
RN代码在Chrome调试器中都会完全中断。 There is no solution. 没有解决办法。 We are screwed. 我们被搞砸了。 I believe that the transpiler used by RN wraps each block that contains even a single let
in a closure, and suddenly this
is something else like _this2
, but Chrome debugger doesn't know that. 我相信RN所使用的编译器会在闭包中包装甚至包含一个let
每个块,突然间, this
就像_this2
类的_this2
,但是Chrome调试器并不知道。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.