React Native Android横屏全屏模式下TextInput文字显示异常问题

解决方案 #

方案1：禁用系统全屏输入模式（优先推荐） #

该方案无业务侵入性，实现成本最低。Android端TextInput提供专属属性disableFullscreenUI，设置为true后横屏状态下获得焦点不会触发系统自带的全屏编辑界面，直接在原组件位置唤起键盘，从根源避免颜色冲突问题。
修改后代码参考：

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

方案2：保留全屏输入功能的原生配置修正 #

如果业务需要保留横屏全屏编辑特性，可修改Android原生主题配置适配：

1. 进入项目Android目录：app/src/main/res/values/styles.xml
2. 在App应用的主主题节点下新增配置：

<!-- 强制修改全屏输入法界面文字颜色为黑色 -->
<item name="android:colorForeground">#000000</item>

该配置仅修改系统输入法全屏界面的文字样式，不会影响App内原有TextInput的文字颜色，适配深色背景页面的显示需求。

方案3：无需修改原生的兼容样式 #

如果不方便调整原生配置，可给TextInput增加如下样式配置，同时适配两种状态的显示效果：

<TextInput
    onChangeText={this.changeText}
    value={text}
    disableFullscreenUI={false}
    style={{
        color: '#ffffff', // 适配深色背景下正常状态的白色文字显示
    }}
    underlineColorAndroid="transparent"
/>

注：React Native 0.6x部分版本存在样式继承异常的已知问题，上述配置可强制将组件设置的文字颜色同步到全屏输入界面。

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