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

Question

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

如何更改在焦点上激活的 TextInput 边框的颜色？您会在 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" }} />

Answer 2

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

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

或者：

您可以尝试删除 web 的轮廓样式，并在输入焦点时应用边框颜色样式

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