在多个模式中，React Native 文本输入不响应触摸且不聚焦

Question

我们的项目要求我们使用一个位于另一个模态中的模态（我知道这很糟糕，但这不是我的决定:)）而且当文本输入位于嵌套模态中时，它们似乎无法聚焦？

这是一个超级简单的代码演示，当放置在嵌套模式中时，代码无法专注于文本输入。

import React, { useState } from "react";
import { Modal, StyleSheet, View, TextInput } from "react-native";

const App = () => {
  const [text, setText] = useState('Some text');
  return (
    <View style={styles.centeredView}>
      <Modal visible={true} transparent={true} >
        <Modal visible={true} transparent={true} >
          <TextInput value={text} onChangeText={setText} style={styles.textInput} />
        </Modal>
      </Modal>
    </View>
  );
};

const styles = StyleSheet.create({
  centeredView: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
    marginTop: 22
  },
  textInput: {
    width: 300,
    height: 300,
    backgroundColor: '#00ffff',
  }
});

export default App;

Here is an expo demo of this code running

这是完全不受支持的东西，还是有可能在单击时以某种方式强制将焦点放在文本输入上？

Answer 1

好的，好像有什么错误。

我最好的猜测如下：

模态框只会让您专注于该模态框内的组件。这是有道理的，当使用模态作为 pop-up.

但是，当您嵌套这些 Modal 组件时，在确定 <TextInput> 是否应该可访问时会出现一些问题。

这是您的调整后版本：https://snack.expo.dev/qM68rALpM

在这里，我们可以看到<TextInput>确实在一个<Modal>内工作，但是不两个以内。它也不适用于 3。

所以，

Our project requires us to use a modal that is inside another modal

真的吗？它需要你吗？考虑到这是错误的行为——而且它可能不是一个已知的行为，我不会同意说这个解决方案是“必需的”。我建议以不同的方式解决这个问题，因为我怀疑这里发生的事情是试图用 Y 解决 X，但 Y 不起作用，而您想解决 Y。

如果你愿意，你可以详细说明你首先要解决的问题 (X)。它可以通过有 2 <Modal> 来解决，但不是嵌套等

Answer 2

好的，知道出了什么问题。

我不完全确定是什么原因造成的，但如果同时打开两个模式，文本输入将无法聚焦。

但是，如果在第一个模式已经打开后显示内部模式，它就可以正常工作。看看这两个例子，看看行为上的区别。

Modals open at the same time. Focus is not working

Second modal is opened with some delay(Even works without the delay as long as it opens a bit later than the first one)

在多个模式中，React Native 文本输入不响应触摸且不聚焦

React Native text input is not responding to touch and not focusing when in multiple Modals

react-native

react-native-web

react-native-textinput