React中无法移除输入框点击后的黑色边框问题

你遇到的黑色边框是TextInput获得焦点时的默认高亮样式，仅设置borderWidth: 0无法消除，以下是针对性的解决方法：

核心修改方案 #

1. 针对Android平台 #

在TextInput组件上添加underlineColorAndroid="transparent"属性，直接消除Android原生的焦点下划线/边框：

<TextInput
  value={searchValue}
  onChangeText={(text) => onSearch(text)}
  placeholder="Search for a restaurant"
  style={styles.input}
  underlineColorAndroid="transparent"
/>

2. 跨平台（含Web环境） #

在input样式中添加outlineWidth: 0，避免Web端渲染时出现焦点outline：

input: {
  flex: 1,
  height: '100%',
  width: '100%',
  color: '#424242',
  backgroundColor: 'transparent',
  borderWidth: 0,
  padding: 0,
  fontSize: 16,
  outlineWidth: 0,
},

完整修改后的代码示例 #

const renderSearch = () => {
  return (
    <View style={styles.searchSection}>
      <FaSearch style={styles.searchIcon} />
      <TextInput
        value={searchValue}
        onChangeText={(text) => onSearch(text)}
        placeholder="Search for a restaurant"
        style={styles.input}
        underlineColorAndroid="transparent"
      />
    </View>
  )
}

// 样式部分
const styles = StyleSheet.create({
  input: {
    flex: 1,
    height: '100%',
    width: '100%',
    color: '#424242',
    backgroundColor: 'transparent',
    borderWidth: 0,
    padding: 0,
    fontSize: 16,
    outlineWidth: 0,
  },
  // 其他样式...
})

内容的提问来源于stack exchange，提问作者tuiqs