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

Question

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

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

Answer 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" }} />

Answer 2

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

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

或：

您可以尝试去掉 web 的轮廓样式，并在输入聚焦时应用 borderColor 样式

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

Change border color of TextInput when focused in react-native-web (expo)