Прокрутка до нижней части ScrollView при начальной загрузке

#react-native

#react-native

Вопрос:

У меня есть большое длинное изображение с несколькими входными данными внизу в моем представлении react native. Когда представление загружается, я хочу, чтобы оно «прокручивалось» до нижней части страницы — все примеры, которые я могу найти в Интернете, запускаются из-за какого-то события, которое совершает пользователь.

Я хочу вызвать scrollToEnd(), но я не уверен, где в жизненном цикле на самом деле будет установлена ссылка — у кого-нибудь есть идеи?

Ответ №1:

Используйте scrollToEnd этот способ. Это приведет к нижней части ScrollView

    <ScrollView
    ref={ref => this.scrollView = ref}
    onContentSizeChange={(contentWidth, contentHeight)=>{        
        this.scrollView.scrollToEnd({animated: true});
    }}>

 

Ответ №2:

Я не совсем понимаю ваш вопрос, но

С компонентом react-native Image у нас есть поддержка загрузки. Я думаю, это то, что вы ищете. попробуйте что-то вроде:

 <Image source={{uri...}} onLoad={(e)=>this.handleImageLoaded(e)}/>
 

затем внутри метода handleImageLoaded вы можете использовать scrollToEnd() с некоторой ссылкой в соответствии с вашим кодом.

также здесь есть другие полезные реквизиты, такие как проверка onLoadStart / End

https://facebook.github.io/react-native/docs/image

Или, если вы просто ждете отображения представления, то для прокрутки я думаю, что componentDidAppear() метод жизненного цикла, если используется react-native -navigation by wix

или с помощью событий react-navigation willFocus, willBlur, didFocus и didBlur для цикла визуализации компонента.. объяснено здесь https://reactnavigation.org/docs/en/navigation-prop.html#addlistener-subscribe-to-updates-to-navigation-lifecycle