在全屏横向模式下反应本机 TextInput 颜色问题

Question

我的本机反应 Android 应用程序中有一个简单的 TextInput。当以横向模式聚焦时，它会以全屏模式打开。但是在全屏键盘模式下，背景和前景都是白色的，所以我看不到我正在输入的文字：

未聚焦时 TextInput 看起来正常：

这是相关代码：

<TextInput
    onChangeText={this.changeText}
    value={text}
    disableFullscreenUI={false}  />

我可以给它一个黑色的样式，但是在这种情况下，黑色将不可见，因为 TextInput 处于黑色屏幕中，如您在上面所见。所以这需要一个解决方案，比如在焦点和模糊上改变两种颜色，但这真的不应该是使用 TextInput 的方式。

已发布相同的问题 here and here。提到这在 0.50 以上的 react-native 版本中得到修复。但是我已经在使用 0.63.3，问题仍然存在。

有人遇到过这个问题吗？任何帮助将不胜感激，谢谢！

Answer 1

在为此苦苦挣扎了一天之后，我找到了解决方法。这实际上并没有修复错误，但它是一个隐藏错误的小“hack”。但是，该错误仍然存在于 react-native 的最新版本中。所以这里是错误的简要解释，为什么有些解决方案不起作用以及我是如何克服它的：

TextInput 在其本机全屏编辑器视图中继承应用的颜色样式，而它不应该。本机全屏始终以白色背景打开。想象一下，您的应用程序在黑暗的屏幕上有一个 TextInput，那么您很可能有一个白色的字体颜色。问题就发生在这种情况下，全屏编辑器在白色背景上以白色字体打开。

首先想到的是应用黑色字体颜色。但是，这也会导致您的深色屏幕中出现黑色。所以很明显应该应用两种颜色动态变化。
检测键盘事件，显示键盘时应用深色，隐藏键盘时应用浅色是个好主意。但是，keyboardDidShow 和 keyboardDidHide 事件在 TextInput 与 disableFullscreenUI 属性一起使用时 NOT 触发。这很奇怪，但是是的，这是另一个错误，它们根本没有被解雇。我可以通过移除道具并看到它们再次被解雇来确认这一点。
在focused/blurred 状态下应用不同的颜色在理论上是另一种解决方案。然而，这导致了更多的复杂性。使用后退按钮从编辑器返回，输入仍处于聚焦状态，并且您必须使用 onTouch 事件，这将成为一个永无止境的循环。所以这绝对不是实践中的解决方案。

注意：此错误在 secureTextEntry TextInputs 上也不存在。有趣的是，带有 secureTextEntry 的 TextInputs 在全屏模式下不继承颜色样式。

解决方法

解决方法是有条件地在 TextInput 上放置一个 Text 组件，然后隐藏 TextInput。这样，就可以为全屏键盘编辑器和显示的文本赋予不同的颜色。

所以首先写一个简单的方法来检测应用程序是否为横向，disableFullscreenUI 为 false 并且它不是安全的文本输入。

const isFullscreenKeyboardEnabled = () =>
   props.orientation === LANDSCAPE // Write your own logic of orientation
   && props.disableFullscreenUI === false
   && !props.secureTextEntry

在 TextInput 之前添加一个具有绝对位置和白色字体颜色的虚拟文本。它应该出现在 TextInput 之前，因为用户仍然可以通过单击它来与 TextInput 进行交互。

{isFullscreenKeyboardEnabled() &&
    <Text style={styles.textInputOverlay}>{text}</Text>}

修改TextInput的样式。在全屏模式下，它应该简单地具有零不透明度和黑色字体颜色。

<TextInput
    value={text}
    disableFullscreenUI={props.disableFullscreenUI}
    style={[
        styles.textInput, isFullscreenKeyboardEnabled() && styles.textInputFullscreen
    ]}/>

这样，用户将在屏幕上看到白色文本，单击它并打开黑色字体的全屏编辑器。诀窍是在黑屏上隐藏带有黑色字体的 TextInput，如上所示。所以我希望这个解决方案可以帮助遇到同样问题的人。

在全屏横向模式下反应本机 TextInput 颜色问题

React Native TextInput color issue in fullscreen landscape mode

android

react-native

react-native-textinput