Question

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

使用undefined时是否可以保留FlatList的{{1}}？

感谢您的关注。

Answer 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

动画API的createAnimatedComponent使得Flat-n的ref在react-native中未定义

1 个答案: