CreateAnimatedComponent API-интерфейса делает ссылку на FlatList неопределенной в реагирующем

Question

Я пытаюсь использовать scrollToIndex функция FlatList на реакцию-родную. Тем не менее, когда я переключаю FlatList в createAnimatedComponent(FlatList), его ref становится undefined,

Есть ли способ сохранить FlatList"s ref когда я использую createAnimatedComponent?

Спасибо за твою заботу.

Answer 1

В настоящее время createAnimatedComponent выставляет метод под названием getNode() это должно работать для получения ссылки на базовый компонент. Вот 2 примера, один со старыми ссылками и один с новым

// 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