Animated API 的 createAnimatedComponent 使 FlatList 的 ref 在 react-native 中未定义

Question

我正在尝试在 react-native 上使用 FlatList 的 scrollToIndex 功能。但是，当我将 FlatList 切换为 createAnimatedComponent(FlatList) 时，其 ref 变为 undefined.

有没有办法在我使用 createAnimatedComponent 时保留 FlatList 的 ref？

感谢您的关心。

Answer 1

目前 createAnimatedComponent 公开了一个名为 getNode() 的方法，该方法应该用于获取底层组件的引用。这里有 2 个例子，一个是旧的 refs，一个是新的

// old ref style
class DemoComp extends Component {
  componentDidMount() {
    // setTimeout is needed for scrollToOffset ¯\_(ツ)_/¯
    setTimeout(() => {
      this.listRef.getNode().scrollToOffset({ offset: 100, animated: true });
    }, 0);
  }

  render() {
    return <Animated.FlatList ref={r => { this.listRef = r; }} {...otherProps} />;
  }
}

// new ref style
class DemoComp extends Component {
  listRef = React.createRef();

  componentDidMount() {
    // setTimeout is needed for scrollToOffset ¯\_(ツ)_/¯
    setTimeout(() => {
      this.listRef.current.getNode().scrollToOffset({ offset: 100, animated: true });
    }, 0);
  }

  render() {
    return <Animated.FlatList ref={this.listRef} {...otherProps} />;
  }
}

最终，将来 createAnimatedComponent 将切换到 "forwarded refs"，后者仅适用于新样式。但是那一天还有很长的路要走，因为所有依赖旧样式的库。

PS。如果您在遥远的将来阅读这篇文章，您可以在 createAnimatedComponent 中查看转发参考的状态：https://github.com/facebook/react-native/issues/19650

Animated API 的 createAnimatedComponent 使 FlatList 的 ref 在 react-native 中未定义

Animated API's createAnimatedComponent makes FlatList's ref undefined in react-native

react-native

react-native-flatlist

react-animated

react-native-scrollview