如何使 TextInput 适应大小以避免键盘？

Question

我正在使用具有工具栏（包含粗体、斜体、下划线等按钮）和编辑器（如 TextInput）的打包组件。

我希望工具栏刚好位于键盘上方，并且编辑器可以动态更改其高度以占据垂直位置的其余部分（在 header 和工具栏之间）。

这是我目前所拥有的，工具栏就在水平滚动视图的下方（方块稍后将是图像）。我怎样才能让这个工具栏附加到键盘上，并且 textInput 的高度动态填充它上面的其余屏幕，直到 header?

这是我目前的代码，不确定如何使这些代码动态化！

    <View behavior={'padding'} >
          <RichEditor
              style={{ minHeight: 150 }}
          />
          <ScrollView horizontal={true} style={{ backgroundColor: 'green' }}>
              <View style={{ backgroundColor: 'white', height: 60, width: 60, borderRadius: 15, borderColor: 'black', borderWidth: 1 }} />
              <View style={{ backgroundColor: 'white', height: 60, width: 60, borderRadius: 15, borderColor: 'black', borderWidth: 1 }} />
              <View style={{ backgroundColor: 'white', height: 60, width: 60, borderRadius: 15, borderColor: 'black', borderWidth: 1 }} />
              <View style={{ backgroundColor: 'white', height: 60, width: 60, borderRadius: 15, borderColor: 'black', borderWidth: 1 }} />
          </ScrollView>
          <KeyboardAvoidingView>
            <RichToolbar e/>
          </KeyboardAvoidingView>
          </View>

Answer 1

将整个视图包裹在 KeyboardAvoidingView 中。然后让你的 Richtoolbar 保持在底部。

<KeyboardAvoidingView
  behavior={Platform?.OS == 'ios' ? 'padding' : 'height'}
  style={{flex: 1}}
  enabled
  keyboardVerticalOffset={34}> //adjust the offset to  adjust position

    <View style={{ flex: 1, paddingBottom: 4 }} >
      //Content here
    </View>

  <View
    style={{
      height: 100, //or whatever height richtoolbar is
    }}>

      RICHTOOLBAR HERE

  </View>
  {/*<KeyboardSpacer topSpacing={-40}/> */}
</KeyboardAvoidingView>

如何使 TextInput 适应大小以避免键盘？

How can I make the a TextInput adapt size to avoid the keyboard?

styling

textinput

reactjs

react-native