React Native KeyboardAvoidingView 键盘已开启时Dialog弹窗显示异常(iOS)

问题根因 #

iOS端原生KeyboardAvoidingView仅会在键盘将要弹出的时刻计算一次布局偏移，若键盘已处于唤起状态后再渲染Dialog组件，KeyboardAvoidingView不会主动重新计算当前键盘高度适配布局，因此出现Dialog被键盘遮挡的问题。

• 方案1：手动监听键盘高度动态适配Dialog边距
  通过React Native原生Keyboard模块监听键盘状态，实时获取当前键盘高度，直接给Dialog组件添加对应底部边距：

  import { Keyboard, Platform } from 'react-native'
  
  // 组件内逻辑
  const [keyboardHeight, setKeyboardHeight] = useState(0)
  
  useEffect(() => {
    if (Platform.OS !== 'ios') return
    const showListener = Keyboard.addListener('keyboardWillShow', (e) => {
      setKeyboardHeight(e.endCoordinates.height)
    })
    const hideListener = Keyboard.addListener('keyboardWillHide', () => {
      setKeyboardHeight(0)
    })
    return () => {
      showListener.remove()
      hideListener.remove()
    }
  }, [])
  
  // 渲染逻辑
  <Portal>
    <SafeAreaView style={{flex: 1}}>
      <Dialog style={{ paddingBottom: keyboardHeight }}>
        {/* 弹窗内容 */}
      </Dialog>
    </SafeAreaView>
  </Portal>
  

• 方案2：调整KeyboardAvoidingView嵌套层级
  将原本包在Portal外层的KeyboardAvoidingView移动到Dialog内部内容区域的外层，避免Portal跨层级渲染导致的偏移计算失效：

  <Portal>
    <SafeAreaView style={{flex: 1}}>
      <Dialog>
        <KeyboardAvoidingView behavior={'padding'} style={{flex: 1}}>
          {/* 弹窗内容 */}
        </KeyboardAvoidingView>
      </Dialog>
    </SafeAreaView>
  </Portal>
  

• 方案3：使用react-native-paper内置的Dialog键盘适配属性
  4.0以上版本的react-native-paper的Dialog组件已内置iOS键盘适配逻辑，直接给Dialog传入keyboardAvoidingViewBehavior属性即可，无需手动嵌套KeyboardAvoidingView：

  <Portal>
    <SafeAreaView style={{flex: 1}}>
      <Dialog keyboardAvoidingViewBehavior="padding">
        {/* 弹窗内容 */}
      </Dialog>
    </SafeAreaView>
  </Portal>
  

• 方案4：替换原生KeyboardAvoidingView为第三方适配组件
  使用react-native-keyboard-aware-scroll-view库的KeyboardAwareView组件替代原生组件，该组件会在自身挂载时主动读取当前已唤起的键盘高度，适配后渲染布局。

内容的提问来源于stack exchange，提问作者Yannick Schröder