在react-native-web (expo)中，当TextInput获得焦点时更改边框颜色

Question

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

我该如何更改在焦点状态下激活的TextInput边框颜色？您可以看到TextInput周围有一个橙色的边框。您知道如何在react-native中更改它吗？

- Arbnor

---

你想在文本输入框获得焦点时改变它的样式吗？当你设置边框颜色时，它是否正常工作？ - Waheed Akhtar

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

- Devid Farinelli

---

不知道这些轮廓样式属性甚至存在。这是有效的。如果您正在使用相同的代码库开发Web和iOS / Android，则必须像这样内联编写：style={[s.textInput，Platform.OS ===“web”？{outlineColor：'#anyColor'}：null]}，否则您将获得编译错误。 iOS和Android不支持StyleSheet中的这些轮廓样式。 - Arbnor

很好，这个完美地运行了，但是你是怎么找到这个信息的？ - cglacet

我发现设置outlineStyle: 'none'可以覆盖更多的情况。 - cjhines

Answer 2

为避免出现任何错误，您需要指定Web平台，因为此样式属性仅存在于React-Native-Web中。

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

或者：

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

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

- artiom-damaschin

Answer 3

我创建了一个新的组件XTextInput，它从父组件中继承了所有的属性。

import * as React from 'react'
import { Platform, TextInput, TextInputProps } from 'react-native'
import { TextInput as WebTextInput } from 'react-native-web'

const XTextInput: React.FC<TextInputProps> = (props) => {
  const { style, placeholderTextColor, ...otherProps } = props
  return Platform.OS === 'web' ? (
    <WebTextInput
      {...otherProps}
      style={[{ outlineColor: 'transparent' }, style]}
      placeholderTextColor={placeholderTextColor ?? '#78716C'}
    />
  ) : (
    <TextInput
      style={[style]}
      accessibilityLabel="Text input label"
      accessibilityHint="Text input hint"
      {...otherProps}
      placeholderTextColor={placeholderTextColor ?? '#78716C'}
    />
  )
}

export default XTextInput

使用此功能

 <XTextInput placeholder="Start your search" style={[{What ever style here}]}/>

- Abhishek Biswas