Modal嵌套TextInput首次点击键盘收回及光标异常问题求助

问题根源 #

Modal的渲染生命周期和普通页面组件不同，首次加载时Modal还未完成布局就触发了TextInput的焦点请求，导致键盘弹出后立即失去焦点；光标位置不稳定则是因为Modal渲染时布局未完全稳定，TextInput的对齐样式未生效。

修复方案 #

1. 确保Modal完全挂载后再渲染TextInput
   利用Modal的onShow回调，延迟渲染TextInput或者设置其可聚焦状态，避免布局未完成时触发焦点：

   const [modalReady, setModalReady] = useState(false);
   
   <Modal
     animationType="fade"
     visible={modalVisible}
     onShow={() => setTimeout(() => setModalReady(true), 100)}
   >
     {modalReady && (
       <TextInput
         keyboardType="phone-pad"
         placeholder={i18n.t('PhoneNumber')}
         style={styles.modalTextPhoneNo}
         onChangeText={(text) => setshareToPhone(text)}
         autoFocus={false}
       />
     )}
   </Modal>
   

2. 强制TextInput的光标对齐样式
   给TextInput添加textAlignVertical="center"属性，同时确保textAlign固定为center，避免布局抖动影响光标：

   <TextInput
     keyboardType="phone-pad"
     placeholder={i18n.t('PhoneNumber')}
     style={styles.modalTextPhoneNo}
     onChangeText={(text) => setshareToPhone(text)}
     textAlignVertical="center"
   />
   

   若仍有问题，可给TextInput外层套一个固定高度的容器，稳定布局结构。

3. 禁用Modal硬件加速（针对部分设备）
   部分设备的硬件加速会导致Modal内输入组件焦点异常，尝试添加hardwareAccelerated={false}：

   <Modal
     visible={modalVisible}
     hardwareAccelerated={false}
   >
     {/* TextInput代码 */}
   </Modal>
   

内容的提问来源于stack exchange，提问作者Jess