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

【问题标题】：React Native memory leak react native gesture handler反应本机内存泄漏反应本机手势处理程序
【发布时间】：2020-03-05 21:13:46
【问题描述】：

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

【问题讨论】：

你使用的主要库是什么？
React Navigation, Redux, Redux Thunk, Axios, rn localize, i18n js

标签： reactjs react-native memory ram

【解决方案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 多个项目。我仍然不明白为什么不做任何事情就会增加内存使用量，但我已经解决了这个问题。

【讨论】：

能否也添加onGestureEvent方法的内容？这可能有助于我们识别嫌疑人。
这是 onGestureEvent 方法：event([ { nativeEvent: { translationX: dragX, velocityX: dragVX, state: state } }, ]);
我已经提供了完整的解决方案

【解决方案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 之间滚动，但我目前还没有找到更好的解决方案。

【讨论】：