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

【问题标题】：Animated API's createAnimatedComponent makes FlatList's ref undefined in react-nativeAnimated API 的 createAnimatedComponent 使 FlatList 的 ref 在 react-native 中未定义
【发布时间】：2018-08-16 04:31:23
【问题描述】：

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

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

感谢您的关心。

【问题讨论】：

标签： react-native react-native-flatlist react-animated react-native-scrollview

【解决方案1】：

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

// 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 将切换到仅适用于新样式的“转发引用”。但是那一天还有很长的路要走，因为所有的库都依赖于旧样式。

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

【讨论】：

offset 为正时有效。当它为负数时，scrollToOffset 不起作用。