React Native-防止React Navigation Stack Header与KeyboardAvoidingView一起移动（Android）

Question

我的应用程序中有一个消息页面，该页面是React-Navigation-Stack的一部分，并且带有带后退按钮的标题。消息包含在KeyboardAvodingView和ScrollView中，但是当我在android上打开键盘时，会丢失标题。我使用了AndroidManifest文件中的设置，但当前使用的是android：windowSoftInputMode =“ adjustPan”，但无法解决此问题。我还看到其他人遇到此问题是由于他们的解决方案都无法解决该问题。

import React, { useState, useEffect, useRef } from 'react'
import { StyleSheet, View, Text, TextInput, ScrollView, KeyboardAvoidingView, Platform, NativeModules, SafeAreaView, Keyboard } from 'react-native'
import Message from './message'


let Messages = props => {
  let { StatusBarManager } = NativeModules
  let scrollViewRef = useRef()

  let [messages, setMessages] = useState([])
  let [keyboardPadding, setKeyboardPadding] = useState(0)
  let [statusBarHeight, setStatusBarHeight] = useState(0)

  useEffect(() => {
    Platform.OS == 'ios' ? StatusBarManager.getHeight((statusBarFrameData) => {
      setStatusBarHeight(statusBarFrameData.height)
    }) : null 
    let keyboardWillShowListener = Keyboard.addListener('keyboardWillShow', keyboardWillShow)
    let keyboardWillHideListener = Keyboard.addListener('keyboardWillHide', keyboardWillHide)

    return () => {
      keyboardWillShowListener.remove()
      keyboardWillHideListener.remove()
    }
  }, [messages, keyboardPadding])


  let keyboardWillShow = (e) => {
    setKeyboardPadding(1)
  }

  let keyboardWillHide = () => {
    setKeyboardPadding(0)
  }

  let scrollStyles = (keyboardPadding) => {
    return { paddingBottom: keyboardPadding }
  }

  let renderMessages = (messages) => {
    return messages.map((data, i) => <Message data={data} key={i}/>)
  } 

  let addMessage = (message) => {
    let messageObj = {
      message: message,
      userId: 2,
      userName: 'Sean'
    }
    setMessages([...messages, messageObj])
  }

  return (
    <SafeAreaView style={styles.container}>
        <KeyboardAvoidingView 
          style={styles.keyboardContainer}
          behavior={Platform.OS == 'ios' ? 'padding' : null}
          keyboardVerticalOffset={statusBarHeight + 44}
        >
          <ScrollView 
            ref={scrollViewRef}
            onContentSizeChange={(contentWidth, contentHeight)=> {scrollViewRef.current.scrollToEnd({animated: true})}}
          >
            <View style={scrollStyles(keyboardPadding)}>
              {renderMessages(messages)}
            </View>
          </ScrollView>
          <View style={styles.textBox}>
            <TextInput 
              style={styles.textInput}
              placeholder='Reply...'
              placeholderTextColor={'rgb(216,216,216)'}
              returnKeyType='done'
              autoCapitalize='none'
              selectionColor='#3490dc'
              multiline={true}
              blurOnSubmit={true}
              onSubmitEditing={(e)=> addMessage(e.nativeEvent.text)}
            />
          </View>  
        </KeyboardAvoidingView>  
    </SafeAreaView>
  )
}

const styles = StyleSheet.create({
    container: {
      flex: 1,
      backgroundColor: 'rgb(0,0,0)'
    },
    keyboardContainer: {
      flex: 1,
      backgroundColor: 'rgb(0,0,0)'
    },
    textInput: {
      color: 'rgb(255,255,255)',
      fontSize: 18,
    },
    textBox: {
      borderColor: '#242F39',
      borderWidth: 1,
      borderRadius: 2, 
      padding: 10,
      paddingLeft: 16,
      backgroundColor: '#0A151F',
    },
})

export default Messages