React Native KeyboardAvoidingView inside a modal for note taking style app

问题描述 投票:0回答:0

我正在尝试编写一个带有笔记组件的应用程序,该组件具有标题和正文。我通过使用模式弹出标题和编辑器控件来添加注释。底部有一个工具栏,可以添加一些其他信息,或附加图像等。

我遇到的问题是 KeyboardAvoidingView 有一些非常奇怪的行为,特别是围绕旋转风景/肖像和视图打开时发生的旋转。我想我主要可以使用 keyboardVerticalOffset 中的幻数来修复它,但感觉这是错误的。我在这里做了一个小吃:模态键盘避免视图不幸的是我无法弄清楚如何在 expo 中旋转所以你必须在设备上运行 expo 应用程序。在此小吃中,您可以看到模拟的工具栏在旋转时被剪裁。有没有办法在不猜测神奇数字的情况下做到这一点?

模态的主体内容是这样的:

   <View style={styles.editorStyle}>
      {header}
      <ScrollView style={styles.scrollingView}>
        {titleView}
        {editorBodyView}
      </ScrollView>
      <KeyboardAvoidingView
        // According to a note in this stack-over-flow post https://stackoverflow.com/questions/47661480/height-vs-position-vs-padding-in-keyboardavoidingview-behavior
        // android may work better with this undefined, and indeed that's what we're seeing, the docs
        // say it should be height but when we set that we get a weird behavior where the keyboard will
        // shove everything off screen.
        behavior={isiOS ? 'position' : undefined}
        keyboardVerticalOffset={20 /* insets.top*/} // this is a magic number that allows the toolbar to be seen, need to figure out what it is, might be iOS only
        style={styles.keyboardView}>
        <FauxToolbar />
      </KeyboardAvoidingView>
    </View>

我试过在标题和正文视图中移动,将滚动位放在 KeyboardAvoidingView 中,这最终会丢失编辑控件及其标签,并将所有内容折叠到底部。我发现了一个例子,其中工具栏是唯一避开键盘的东西,这是有道理的,因为这是真的,编辑控件滚动,它不会避免。

modal-dialog
© www.soinside.com 2019 - 2024. All rights reserved.