在输入webview文本时，自动向下滚动

Question

我使用的是react本机-pell-富编辑器，它构建在WebView组件上。当我到达可见WebView的底部(在输入了大约20行后的)，我在RichEditor中键入的文本就会出现在可见区域下面--所以文本被输入了，但是我就是看不到它！我必须向下滚动每一行，看看我在输入什么。

KeyboardAvoidingView是推高我的RichEditor (WebView)时，RichEditor是集中。

是否有一种方法可以自动滚动到输入时光标所在的位置？也许有更好的解决办法？

<ScrollView>

    <KeyboardAvoidingView behavior={'padding'}>

      <RichToolbar
        actions={[ actions.keyboard, actions.setBold, actions.setItalic, actions.setUnderline, actions.setStrikethrough, actions.blockquote, actions.code, actions.alignCenter, actions.alignLeft, actions.alignRight ]}
        editor={that.richText}/>
      
      <RichEditor
        initialContentHTML={messageBody}
        initialFocus={true}
        placeholder={'Compose email'}
        ref={that.richText}/>
        
    </KeyboardAvoidingView>

  </ScrollView>

Answer 1

我解决这个问题的方法有两部分。我没有使用KeyboardAvoidingView。

1. 我还将RichEditor放置在ScrollView中，但在初始化编辑器之后调用ScrollView.scrollToEnd()方法，以便光标位于键盘上方。在调用RichEditor.focusContentEditor后，在editorInitializedCallback中进行短暂超时之后，就会发生这种情况。注意:这样做意味着您不需要使用initialFocus道具。
2. 要在用户输入时移动位置，请在ScrollView的onContentSizeChanged支柱中调用onContentSizeChanged。您可以使用传递给该道具函数的维度值来根据先前的维度和存储在组件状态中的滚动位置计算要滚动的像素数。