反应本机内存泄漏反应本机手势处理程序

Question

我的应用程序内存使用量大约每3秒增加0.1 MB，而我无需在应用程序中执行任何操作。我确保删除所有事件侦听器，以解决问题，这不是问题，即时消息可以解决此内存泄漏问题。是否有工具可以检查哪些进程正在写入ram或其他方法来检测此泄漏？

Answer 1

我检测到内存泄漏，这是react-native-gesture-handler的问题，我这样做是

<PanGestureHandler
  onGestureEvent={this.onGestureEvent}
  onHandlerStateChange={this.onGestureEvent}>
  <Animated.View style={{ transform: [{ translateX: this.translateX }] }}>
     <FlatList />
  </Animated.View>
</PanGestureHandler>

我没有想到整个FlatList前面会有一个手势处理程序，在我的案例中，该列表包含200多个项目。我仍然不理解为什么不进行任何操作都会增加内存使用率，但是我已经解决了这个问题。

Answer 2

这是我的解决方法：

const { width: SCREEN_WIDTH } = Dimensions.get('window');
const TOSS_SEC = 0.2;
const MULTIPLIER = Math.round(SCREEN_WIDTH / 90);

class ReanimatedFlatList extends React.Component {
  constructor(props) {
    super(props);
    // drag Distance
    const dragX = new Value(0);
    // gesture state
    const state = new Value(-1);
    // drag velocity
    const dragVX = new Value(0);
    this.onGestureEvent = event([
      { nativeEvent: { translationX: dragX, velocityX: dragVX, state: state } },
    ]);
    this.transX = new Value();
    const prevDragX = new Value(0);
    const clock = new Clock();
    const snapPoint = cond(
      lessThan(add(this.transX, multiply(TOSS_SEC, dragVX)), -80),
        -100,
        0,
    );
    this.unconstrainedX = cond(
      eq(state, State.ACTIVE),
      [
        stopClock(clock),
        set(this.transX, add(this.transX, sub(dragX, prevDragX))),
        set(prevDragX, dragX),
        this.transX,
      ],
      [
        set(prevDragX, 0),
        set(
          this.transX,
          cond(
            defined(this.transX),
            runSpring(clock, this.transX, dragVX, snapPoint),
            0,
          ),
        ),
      ],
    );
    this.translateX = interpolate(this.unconstrainedX, {
      inputRange: [-100, 0],
      outputRange: [-100, 0],
      extrapolate: Extrapolate.CLAMP,
    });
  }
  render() {
    return (
      <React.Fragment>
        <Animated.View style={{ transform: [{ translateX: this.translateX }] }}>
          <FlatList />
        </Animated.View>
        <PanGestureHandler
          maxPointers={1}
          onGestureEvent={this.onGestureEvent}
          onHandlerStateChange={this.onGestureEvent}>
        <Animated.View
          style={{
            transform: [{ translateX: multiply(this.translateX, MULTIPLIER) }],
            position: 'absolute',
            top: 0,
            width: SCREEN_WIDTH,
            right: -SCREEN_WIDTH + 50,
            bottom: 0,
          }}
        />
      </PanGestureHandler>
    </React.Fragment>
  );
 }
}

这使我可以将FlatList 100 pt向左移动，并在其旁边显示一些内容，就像导航抽屉一样。该解决方案并不完美，因为您将无法在x轴上的SCREEN_WIDTH-50 pt和SCREEN_WIDTH之间滚动，但是我目前尚未找到更好的解决方案。