React Native安卓端TextInput边框颜色及聚焦样式修改方法

嘿，这个问题我熟，刚好之前做项目的时候折腾过，给你详细说下：

一、基础边框颜色修改 #

React Native的TextInput默认是没有可见边框的（因为borderWidth默认值为0），所以要先设置边框宽度才能看到颜色效果。直接通过style属性配置borderColor和borderWidth就行，还能搭配borderRadius做圆角优化。

举个简单的实现例子：

import React from 'react';
import { TextInput, View } from 'react-native';

const App = () => {
  return (
    <View style={{ padding: 20 }}>
      <TextInput
        placeholder="请输入内容"
        style={{
          borderWidth: 1, // 必须设置宽度，否则边框不会显示
          borderColor: '#cccccc', // 默认的边框灰色
          borderRadius: 4,
          paddingHorizontal: 12,
          paddingVertical: 8,
        }}
      />
    </View>
  );
};

export default App;

二、安卓平台焦点状态下的样式修改 #

安卓的TextInput默认自带系统样式的下划线，焦点时的下划线颜色也是系统默认的，要自定义焦点样式的话，得先把默认下划线去掉，再手动管理焦点状态来切换样式。

步骤1：移除安卓默认下划线 #

给TextInput添加underlineColorAndroid="transparent"属性，彻底关闭系统默认的下划线，让我们自定义的边框样式完全生效。

步骤2：跟踪焦点状态切换样式 #

用React的状态（比如函数组件的useState）来记录TextInput是否获得焦点，然后在onFocus和onBlur事件里更新状态，最后根据状态动态调整边框颜色或其他样式。

完整的示例代码：

import React, { useState } from 'react';
import { TextInput, View } from 'react-native';

const App = () => {
  // 用状态跟踪输入框是否聚焦
  const [isInputFocused, setIsInputFocused] = useState(false);

  return (
    <View style={{ padding: 20 }}>
      <TextInput
        placeholder="安卓焦点样式测试"
        // 关闭默认下划线
        underlineColorAndroid="transparent"
        // 聚焦和失焦时更新状态
        onFocus={() => setIsInputFocused(true)}
        onBlur={() => setIsInputFocused(false)}
        style={{
          borderWidth: 1,
          // 根据焦点状态切换边框颜色
          borderColor: isInputFocused ? '#1890ff' : '#cccccc',
          borderRadius: 4,
          paddingHorizontal: 12,
          paddingVertical: 8,
          // 聚焦时还可以额外加个边框加粗或阴影效果
          ...(isInputFocused && {
            borderWidth: 2,
            shadowColor: '#1890ff',
            shadowOffset: { width: 0, height: 0 },
            shadowOpacity: 0.3,
            shadowRadius: 2,
            elevation: 2, // 安卓平台的阴影用elevation属性
          })
        }}
      />
    </View>
  );
};

export default App;

类组件版本参考 #

如果你的项目还在使用类组件，思路是完全一致的，只是把useState换成类的状态管理：

import React from 'react';
import { TextInput, View } from 'react-native';

class App extends React.Component {
  state = { isInputFocused: false };

  render() {
    return (
      <View style={{ padding: 20 }}>
        <TextInput
          placeholder="类组件焦点样式测试"
          underlineColorAndroid="transparent"
          onFocus={() => this.setState({ isInputFocused: true })}
          onBlur={() => this.setState({ isInputFocused: false })}
          style={{
            borderWidth: 1,
            borderColor: this.state.isInputFocused ? '#1890ff' : '#cccccc',
            borderRadius: 4,
            paddingHorizontal: 12,
            paddingVertical: 8,
          }}
        />
      </View>
    );
  }
}

export default App;

这样就能完美实现安卓平台下TextInput焦点状态的样式自定义，不管是改边框颜色、加粗边框还是加阴影都能搞定~

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