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

【问题标题】：React Native TextInput color issue in fullscreen landscape mode在全屏横向模式下反应本机 TextInput 颜色问题
【发布时间】：2021-10-23 19:29:57
【问题描述】：

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

TextInput 在未聚焦时看起来很正常：

这是相关代码：

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

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

here 和 here 已发布相同的问题。有人提到，这是通过 react-native 的 0.50 以上版本修复的。但是我已经在使用 0.63.3 并且问题仍然存在。

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

【问题讨论】：

false != true ... in React-native Text input color issue in full screen editing jayson.centeno 的答案看起来与您的代码不同
这能回答你的问题吗？ React-native Text input color issue in full screen editing
我必须保留 disableFullscreenUI={false}。这是键盘应以全屏模式打开的要求。该用户通过完全禁用全屏模式解决了这个问题。问题在于全屏模式，我必须保留它。
@Selvin 所以不，它不能解决我的问题，因为它删除了全屏模式。我已经在我的问题中提到了该链接。该解决方案实际上并没有解决问题，它只是使用了另一种模式，对于使用全屏的开发人员来说问题仍然存在。
我很确定系统的一部分......我刚刚签入了我的本机（非反应）应用程序，它以相同的方式工作......所以唯一的方法是在原生android代码中使用flagNoExtractUi（你可以在反应中使用disableFullscreenUI=true来实现）

标签： android react-native react-native-textinput

【解决方案1】：

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

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

首先想到的是应用黑色字体颜色。但是，这也会导致您的暗屏幕中出现黑色。所以很明显，两种颜色应该是动态变化的。
检测键盘事件，在显示键盘时应用深色，在隐藏键盘时应用浅色将是一个好主意。但是，当 TextInput 与 disableFullscreenUI 属性一起使用时，keyboardDidShow 和 keyboardDidHide 事件会不触发。这很奇怪，但是是的，这是另一个错误，他们根本没有被解雇。我可以通过移除道具并看到它们再次被解雇来确认这一点。
在聚焦/模糊状态下应用不同的颜色是理论上的另一种解决方案。然而，这导致了更多的复杂性。使用返回按钮从编辑器返回，输入仍然处于焦点状态，您必须使用 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。所以我希望这个解决方案可以帮助遇到同样问题的人。

【讨论】：