react-native - KeyboardAvoidingView 无法正常工作

Question

KeyboardAvoidingView 无法正常工作

我正在尝试将 KeyboardAvoidingView 与 behavior="padding" 一起使用。

出于某种原因，当我尝试在 TextInput 中输入任何文本时，TextInput 下面有一个空格。附件是正在发生的事情的图片以及代码。有人知道这里发生了什么吗？

  render() {
    return (

      <KeyboardAvoidingView  style={{ flex: 1}}  behavior="padding">
      < View
          style={{
            flex: 1,
           
          backgroundColor: "#FFFFFF",
         
        }}
      >
        
        <ScrollView
          contentContainerStyle={{ justifyContent: "flex-end", flex: 1 }}>
                <ChatInfo />
              </ScrollView>

        
          <View style={styles.container}>
          <TextInput
            style={styles.input}
            underlineColorAndroid="transparent"
            autoCapitalize="none"
            onChangeText={text => this.setState({ text: text })}
            value={this.state.text}
          />

          <TouchableOpacity
            style={styles.submitButton}
            onPress={this.submitName}
          >
            <Text style={styles.submitButtonText}> SEND </Text>
          </TouchableOpacity>
        </View>
       
      </ View>
      </KeyboardAvoidingView>
    );
  }
}

export default connect()(ChatScreen);

const styles = StyleSheet.create({
  input: {
    margin: 2,
    paddingLeft: 15,
    flex: 1,
    height: 40,
    padding: 10,
    fontSize: 14,
    fontWeight: "400"
  },

      container: {
        borderTopWidth: 1,
        minWidth: "100%",
        borderColor: "#cccccc",
        height: 44,
        flexDirection: "row",
        justifyContent: "space-between",
        backgroundColor: "#fff"
        
      },

  submitButtonText: {
    color: "#0a9ffc",
    fontSize: 14,
    fontWeight: "500"
  },

  submitButton: {
    backgroundColor: "#fff",
    padding: 10,
    margin: 2,
    height: 40,
    alignItems: "center",
    justifyContent: "center"
  }
});

Answer 1

如果您使用react-navigation，这会受到react-navigation标题的影响。标题的高度在不同的移动屏幕上有所不同。因此，您必须获取标题的高度并将其传递到 keyboardVerticalOffset 属性中。

import * as React from 'react'
import { KeyboardAvoidingView } from 'react-native'
import { useHeaderHeight } from '@react-navigation/elements'

type Props = {
  children: React.ReactNode
}

export const KeyboardShift = ({ children }: Props) => {
  const height = useHeaderHeight()

  return (
    <KeyboardAvoidingView
      keyboardVerticalOffset={height + 47}
      behavior="padding"
      style={{ flex: 1 }}
      enabled>
      {children}
    </KeyboardAvoidingView>
  )
}