Как я могу убедиться, что мой scrollView прокручивает высоту KeyboardSpacer?

Question

Я работаю над страницей комментариев с почтовым контейнером (показывая сообщение) и listView под визуализацией комментариев в нижней части экрана. Просто под ним находится textInput с клавиатурой. Он будет расти, когда пользователь будет писать сообщение. Все это прекрасно работает.

Весь экран завернут в scrollView.

Я в принципе хочу иметь Scrollview автоматически прокручивать вниз к нижней части экрана, чтобы показать пользователям комментарии, после того, как они нажали «отправить»

Я нашел этот вопрос здесь: https://github.com/facebook/react-native/issues/8003, что объясняет решение.

Это решение после того, как я реализовал его:

class Comments extends Component { 
    contentHeight = 0; 
    scrollViewHeight = 0; 
    scrollToBottom(animated = true) { 
    const scrollHeight = this.contentHeight - this.scrollViewHeight; 
    if (scrollHeight > 0) { 
    const scrollResponder = this.refs.scrollView.getScrollResponder(); 
    scrollResponder.scrollResponderScrollTo({ x: 0, scrollHeight, animated }); 
    } 
    } 
    render() { 
    return (
     <View style={{ flex: 1 }}> 
     <ScrollView 
      ref='scrollView' 
      onContentSizeChange={(w, h) => this.contentHeight = h} 
      onLayout={ev => this.scrollViewHeight = ev.nativeEvent.layout.height} 
     > 
      <PostSection /> 
      <CommentList /> 
     </ScrollView> 
     <CommentBar 
      scrollToBottom={this.scrollToBottom.bind(this)} 
     /> 
     <KeyboardSpacer /> 
     </View> 
    ); 
    } 
} 

Я просто изменил его класс расширяет приспособлениям

Однако такое поведение, по какой-то причине на самом деле программно свитков к вершине, которая является напротив того, что он сказал, что это будет делать.

Поэтому я изменил линию 10 из

scrollResponder.scrollResponderScrollTo({ x: 0, scrollHeight, animated }); 

в

scrollResponder.scrollResponderScrollTo({ x: 0, y: scrollHeight, animated }); 

в основном, я просто добавил y: scrollHeight вместо scrollHeight по себе.

На этот раз он прокручивается, но он прокручивает вниз слишком далеко.

Это будет добавлять все, что белое пространство в нижней части. Есть ли что-то очевидное, что я пропал?

Я думаю, что это должно быть из-за клавиатуры spacer, которую я использую, поскольку количество пробелов выглядит на правильной высоте проставки.

Как я могу обойти это?

Спасибо!

Answer 1

Как я вижу, ваши комментарии вставляются в начало списка ListView при нажатии кнопки «пост». В новой версии реакции native используется метод scrollTo (options: {x: number = 0; y: number = 0; animated: boolean = true}) ', который рекомендуется использовать для прокрутки программно. Вы должны передать 0 для значения y, после чего прокрутите до верхней части scrollView на клавиатуре.

Вы используете «KeyboardSpacer», тогда ваш метод scrollToBottom вызывается первым, прежде чем обновлять фактический scrollViewHeight. В то же время ваш scrollViewHeight является

scrollViewHeight = initialScrollViewHeight - keyBoardHeight

то значение scrollHeight в формуле

Const scrollHeight = this.contentHeight - это.scrollViewHeight;

будет больше, чем ожидалось, вот почему в нижней части вашего scrollView появляется больше свободного пространства.

Если это не работает даже после установки значения y на 0 в методе scrollTo, я рекомендовал использовать библиотеку IQKeyboardManager для iOS. Он обрабатывает все поведение прокрутки, которые вы сами не кодируете. Благодаря!