React Native如何让不可编辑的TextInput保留原文本透明度？

当TextInput设置editable={false}时，组件会自动应用禁用状态的默认样式，导致文本透明度降低。这里提供两种简单的解决思路：

方法一：直接覆盖禁用状态样式 #

保留editable={false}，通过内联样式强制重置透明度和文本颜色，确保和可编辑状态一致：

<TextInput
  editable={false}
  value="需要展示的文本"
  style={{
    opacity: 1, // 强制设置透明度为1
    color: '#333', // 替换成你可编辑状态下的文本颜色
    // 以下是你原本的组件样式，按需添加
    fontSize: 16,
    padding: 12,
    borderWidth: 1,
    borderColor: '#ddd',
    borderRadius: 4
  }}
/>

这种方法简单直接，适合大多数场景，注意要保证设置的颜色、透明度和你正常可编辑状态的样式完全匹配。

方法二：模拟不可编辑状态（不使用editable={false}） #

让组件保持editable={true}，但通过其他属性阻止用户编辑操作，这样组件会完全沿用可编辑状态的样式：

<TextInput
  editable={true}
  value="需要展示的文本"
  selectTextOnFocus={false} // 阻止选中文本
  onTouchStart={(e) => e.preventDefault()} // 阻止触摸触发编辑
  onFocus={(e) => e.target.blur()} // 一旦获取焦点立即失焦
  style={/* 直接使用你可编辑状态下的样式即可 */}
/>

这种方式的好处是完全规避了禁用状态的默认样式，无需额外调整样式属性，适合对样式一致性要求极高的场景。

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