在 react-native-web (expo) 中聚焦时更改 TextInput 的边框颜色

Posted 2023-02-19

【中文标题】在 react-native-web (expo) 中聚焦时更改 TextInput 的边框颜色

【英文标题】：Change border color of TextInput when focused in react-native-web (expo)

【发布时间】：2020-10-04 23:59:59

【问题描述】：

在 Expo 的最新版本中，有一个 Web 支持。在图片中，您可以看到使用 React Native 创建并在 Web 中呈现的普通 TextInput。

如何更改在焦点上激活的 TextInput 边框的颜色？您会在 TextInput 周围看到一个橙色边框。你知道如何在 react-native 中改变这一点吗？

【问题讨论】：

您想更改文本输入时的焦点？放置边框颜色时是否正常工作？

【参考方案1】：

根据react-native-web类型定义（link），可用属性有：

outlineColor?: ColorValue,
outlineOffset?: string | number,
outlineStyle?: string,
outlineWidth?: string | number, // set to 0 to disable outline

您可以使用以下方法更改轮廓颜色：

<TextInput style=Platform.OS === "web" && outlineColor: "orange"  />

【讨论】：

不知道这些大纲样式道具竟然存在。这是有效的。如果您正在使用相同的代码库开发 Web 和 ios/android，那么您必须像这样内联编写它： style=[s.textInput, Platform.OS === "web" ? outlineColor: '#anyColor' : null] 否则你会得到编译错误。 iOS 和 Android 不支持 StyleSheet 中的这些轮廓样式。

很好，效果很好，但是您是如何找到这些信息的？

我发现设置 outlineStyle: 'none' 涵盖了更多案例。

【参考方案2】：

为避免任何错误，您需要指定 web 平台，因为 此样式道具仅存在于 react-native-web

<TextInput
  style=
    Platform.select(
      web: 
        outlineColor: 'orange',
      ,
    )

/>

或：

您可以尝试去除网页的轮廓样式，并在输入焦点时应用 borderColor 样式

<TextInput
  style=
    Platform.select(
      web: 
        outlineStyle: 'none',
      ,
    )

/>