时间戳

首页 > 解决方案 > 在全屏横向模式下反应本机 TextInput 颜色问题

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

问题描述

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

在此处输入图像描述

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

在此处输入图像描述

这是相关的代码：

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

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

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

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

标签： androidreact-nativereact-native-textinput

解决方案

经过一天的努力，我找到了解决方法。这实际上并没有修复错误，但它是一个隐藏错误的小“黑客”。但是，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。所以我希望这个解决方案可以帮助任何遇到同样问题的人。

推荐阅读