Tôi đang cố gắng xây dựng trò chơi trên thiết bị di động trong React Native, 0,17, dành cho trải nghiệm và đang gặp sự cố liên quan đến thu gom rác thải. Ngay bây giờ tôi có mười vòng tròn đang được trả lại đồng thời mà trả lại xung quanh màn hình. Tuy nhiên, mức tiêu thụ bộ nhớ cho ứng dụng đang tăng theo thời gian và tôi không biết cách giải quyết vấn đề này. Có vẻ như đây là vấn đề React Native trong các phiên bản trước và tôi chú ý rơi vào bộ nhớ theo thời gian như trong biểu đồ ở đây nhưng trong một ứng dụng lớn hơn nhiều, tôi lo ngại rằng điều này có thể là vấn đề. Có ai khác có vấn đề tương tự hoặc có giải pháp không?React Native Memory Rò rỉ Hoạt ảnh Rò rỉ Vấn đề
Mã có liên quan ở đây và mọi trợ giúp đều được đánh giá cao. Cảm ơn bạn!
var test = React.createClass ({
getInitialState: function() {
var circs = [];
for (var i = 0; i < startCount; i++) {
circs.push({
id: i,
x: 0,
y: 0,
vx: 2 + Math.random() * 2,
vy: 2 + Math.random() * 2,
dx: 0,
dy: 0,
cOb: new Animated.ValueXY({x: 0, y: 0}),
});
}
return {
circles: circs,
stop: 1
};
},
stopCircle: function() {
this.state.stop = -1 * this.state.stop;
this.setState(this.state);
},
componentDidMount: function() {
this.animateCircles();
},
animateCircles: function() {
this.triggerAnimation(this.animateCircles);
},
triggerAnimation: function(ani) {
for (var i = 0; i < this.state.circles.length; i++) {
var cCircle = this.state.circles[i];
if (cCircle.x * cCircle.x + cCircle.y * cCircle.y > DIST_TO_EDGE * DIST_TO_EDGE) {
var prevX = cCircle.x - cCircle.vx;
var prevY = cCircle.y - cCircle.vy;
var exitX = (1.5 * prevX + .5 * cCircle.x)/2;
var exitY = (1.5 * prevY + .5 * cCircle.y)/2;
cCircle.x = prevX;
cCircle.y = prevY;
var exitRad = Math.sqrt(exitX * exitX + exitY * exitY);
exitX = exitX * DIST_TO_EDGE/exitRad;
exitY = exitY * DIST_TO_EDGE/exitRad;
var twiceProjFactor = 2 * (exitX * cCircle.vx + exitY * cCircle.vy)/(DIST_TO_EDGE * DIST_TO_EDGE);
cCircle.vx = cCircle.vx - twiceProjFactor * exitX;
cCircle.vy = cCircle.vy - twiceProjFactor * exitY;
break;
}
}
if (this.state.stop == 1) {
for (var k = 0; k < this.state.circles.length; k++) {
this.state.circles[k].x += this.state.circles[k].vx;
this.state.circles[k].y += this.state.circles[k].vy;
}
}
this.setState(this.state);
var animateC = [];
for (var i = 0; i < this.state.circles.length; i++) {
var currCirc = this.state.circles[i];
animateC.push(
Animated.timing(currCirc.cOb, {
...TIMING_CONFIG,
toValue: {x: currCirc.x, y: currCirc.y}
}));
}
Animated.parallel(
animateC
).start(ani);
},
getStyle: function(which) {
return [
styles.circle,
{transform: this.state.circles[which].cOb.getTranslateTransform()}
];
},
render: function() {
return (
<View style={styles.container}>
<View style={styles.edge}>
</View>
{
this.state.circles.map(function(c, i) {
return (
<TouchableWithoutFeedback key={i} onPress={this.stopCircle}>
<Animated.View style={this.getStyle(i)} />
</TouchableWithoutFeedback>
);
}, this)
}
</View>
);
},
Việc áp dụng đầy đủ có thể được tìm thấy tại https://github.com/heliumsoule/React-Native-Pool nếu bạn muốn chạy các ứng dụng cho chính mình.
Cảm ơn bạn một lần nữa.
this.setState (this.state); Cái đó làm cái gì? Tôi chưa bao giờ gặp điều đó trước đây. – Hasen