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

Question

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

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

Answer 1

根据react-native-web类型定义（链接），可用的属性是：

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不支持样式表中的这些outlineStyles。 (2认同)
深入研究源代码:) (2认同)

Answer 2

为了避免任何错误，您需要指定Web平台，因为此样式属性仅存在于react-native-web中

<TextInput
  style={
    Platform.select({
      web: {
        outlineColor: 'orange',
      },
    })
}
/>

或者：

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

<TextInput
  style={
    Platform.select({
      web: {
        outlineStyle: 'none',
      },
    })
}
/>