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

Question

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

有没有办法在我使用时保留FlatList？refcreateAnimatedComponent

谢谢你的关心。

Answer 1

当前createAnimatedComponent公开了一个调用的方法，该方法getNode()应该用于将 ref 获取到底层组件。这里有 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将切换到“转发引用”，它只适用于新样式。但是那一天还有很长的路要走，因为所有的库都依赖于旧样式。

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