KeyboardAvoidingView 不适用于“填充”或“高度”答案

【问题标题】：KeyboardAvoidingView not working with "padding" or "heightKeyboardAvoidingView 不适用于“填充”或“高度”
【发布时间】：2021-10-17 12:09:24
【问题描述】：

我正在包装一个View，其中包含一个TextInput 和Text 组件。我的目标是在键盘可见时改变视图的高度。

对于我的应用程序，我需要 Header、TabBars 和发送组件为 transparent 和 absolute，这意味着文本输入在没有 marginTop 或设置位置的情况下拉到它们下方文本输入的绝对值也是如此。

我尝试根据可见的键盘有条件地更改视图的高度，但移动并不平滑。我想使用 KeyboardAvoidingView 但唯一能做任何事情的行为是position，我不想把它推高。

从照片中可以看出，无论我做什么都没有调整。

任何帮助将不胜感激！

已编辑以下是对我有用的解决方案

 <View style={tw.style(`h-full bg-white`, {})}>
  <StatusBar barStyle={"light-content"} />
   <KeyboardAvoidingView behavior="padding" keyboardVerticalOffset={-160}>
    <View
      style={tw.style(`w-full bg-white`, {
        marginTop: 177,
        marginBottom: 225,
      })}
    >
      <TextInput
        style={tw.style(`h-full w-full text-black text-base p-4 bg-white`, {
          textAlignVertical: "top",
        })}
        defaultValue={defaultMessage}
        onChangeText={(messageText) => setMessageText(messageText)}
        maxLength={500 + defaultMessage.length}
        keyboardType="default"
        multiline={true}
      />
      <View style={tw.style(`w-full h-8 items-end pr-4 py-2`, {})}>
        <Text>{charRemain} characters remaining</Text>
      </View>
    </View>
  </KeyboardAvoidingView>
</View>

【问题讨论】：

标签： javascript css react-native keyboard

【解决方案1】：

尝试添加keyboardVerticalOffset

<KeyboardAvoidingView style={tw.style(`h-full flex flex-col bg-white`, {})} behavior="height" keyboardVerticalOffset={200}>

请用一些正负偏移值做一些尝试。

【讨论】：

谢谢@Andresh Singh！我不得不在底部添加填充，因为视图位于标签栏后面，然后包含负偏移值。