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

Question

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

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

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

这是我到目前为止的代码，不知道如何使这些动态化！

    <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>