React Native + Expo环境下聚焦TextInput后打开Modal内容不显示的问题修复咨询

我之前在使用react-native-keyboard-controller开发Expo项目时，刚好碰到过一模一样的问题！结合你提供的完整代码，我来帮你拆解问题原因，再给几个亲测有效的修复方案：

问题根源 #

这个bug和react-native-keyboard-controller的核心机制有关：当你聚焦输入框时，KeyboardAwareScrollView会通过给视图添加translateY偏移来适配键盘高度；关闭键盘后，虽然视觉上键盘消失了，但这个变换属性可能存在动画残留，或者KeyboardProvider管理的视图树没有完全重置布局状态。

你的Modal默认处于KeyboardProvider包裹的视图层级中，会继承这个残留的translateY偏移，导致Modal内容被“移”到了屏幕可视区域外——其实内容还在，只是不在你能看到的地方而已，看起来就像是消失了。

亲测有效的修复方案 #

我整理了三个可行的方案，你可以根据自己的项目需求选择：

方案一：让Modal彻底脱离键盘控制器的影响（首推） #

给Modal添加presentationStyle="overFullScreen"属性，这个属性会让Modal直接挂载到应用的根视图上，完全不受父容器的变换、布局影响，是最彻底的解决方案：

修改app/index.tsx里的Modal组件：

<Modal
  visible={isShowModal}
  presentationStyle="overFullScreen" // 新增这一行
>
  <View style={styles.modal}>
    <Text>This text and button should appear</Text>
    <Button title="close modal" onPress={() => setIsShowModal(false)} />
  </View>
</Modal>

方案二：打开Modal前强制清理键盘动画残留 #

在打开Modal前先确保键盘完全关闭，等待动画彻底结束后再显示Modal：

1. 先导入React Native的Keyboard模块：

import { Keyboard, Button, Modal, StyleSheet, Text, TextInput, View } from 'react-native'

2. 改写打开Modal的点击事件：

<Button
  onPress={() => {
    // 先强制关闭键盘
    Keyboard.dismiss()
    // 延迟100ms确保键盘动画完全结束，再打开Modal
    setTimeout(() => setIsShowModal(true), 100)
  }}
  title="Open modal"
/>

方案三：强制重置Modal内容的变换属性 #

给Modal的内容容器添加transform: [{translateY: 0}]，直接抵消可能继承的偏移：
修改styles里的modal样式：

const styles = StyleSheet.create({
  // ... 保留其他原有样式
  modal: {
    backgroundColor: 'rgba(0,0,0,0.2)',
    justifyContent: 'center',
    alignItems: 'center',
    flex: 1,
    gap: 10,
    transform: [{ translateY: 0 }], // 新增这一行
  },
})

整合方案一的完整可运行代码 #

这里给你整合了方案一的完整app/index.tsx代码，直接替换就能用：

import { useState } from 'react'
import { Button, Modal, StyleSheet, Text, TextInput, View } from 'react-native'
import { KeyboardAwareScrollView } from 'react-native-keyboard-controller'
import { SafeAreaView } from 'react-native-safe-area-context'

export default function IndexPage() {
  const [isShowModal, setIsShowModal] = useState(false)

  return (
    <SafeAreaView style={{ flex: 1 }}>
      <View style={styles.container}>
        <KeyboardAwareScrollView
          showsVerticalScrollIndicator={false}
          contentContainerStyle={{
            flexGrow: 1,
            justifyContent: 'space-between',
          }}
        >
          <View style={styles.inpustWrapper}>
            <TextInput style={styles.input} placeholder="input1" />
            <TextInput style={styles.input} placeholder="input2" />
            <TextInput style={styles.input} placeholder="input3" />
            <TextInput style={styles.input} placeholder="input4" />
            <TextInput style={styles.input} placeholder="input5" />
          </View>
          <Button onPress={() => setIsShowModal(true)} title="Open modal" />
        </KeyboardAwareScrollView>
      </View>
      <Modal
        visible={isShowModal}
        presentationStyle="overFullScreen"
      >
        <View style={styles.modal}>
          <Text>This text and button should appear</Text>
          <Button title="close modal" onPress={() => setIsShowModal(false)} />
        </View>
      </Modal>
    </SafeAreaView>
  )
}

const styles = StyleSheet.create({
  container: {
    paddingHorizontal: 20,
    flex: 1
  },
  inpustWrapper: {
    gap: 16,
    marginBottom: 20,
    flex: 1
  },
  input: {
    borderWidth: 1,
    borderColor: 'black',
    height: 35,
    paddingHorizontal: 8
  },
  modal: {
    backgroundColor: 'rgba(0,0,0,0.2)',
    justifyContent: 'center',
    alignItems: 'center',
    flex: 1,
    gap: 10,
  },
})

内容来源于stack exchange