React Native中如何实现点击文本输入框时的高亮效果

核心逻辑是通过输入框的获焦/失焦事件切换状态，动态覆盖容器的边框样式，已编写的firstNameView基础样式不需要做任何修改，直接复用即可。

实现步骤 #

• 定义布尔状态存储输入框的聚焦状态
• 给TextInput组件绑定onFocus、onBlur回调，聚焦时把状态设为true，失焦时设为false
• 给输入框外层容器做样式合并：基础样式固定用原有firstNameView，聚焦时追加高亮样式覆盖边框属性

完整代码示例 #

组件逻辑部分 #

import { View, TextInput, StyleSheet } from 'react-native';
import { useState } from 'react';
// 项目内已定义的COLORS常量正常引入使用即可

const FormItem = () => {
  // 控制名字输入框聚焦状态
  const [isFirstNameFocused, setIsFirstNameFocused] = useState(false);

  return (
    {/* 外层原有布局结构保持不变 */}
    <View 
      style={[
        styles.firstNameView,
        isFirstNameFocused && {
          borderColor: COLORS.primary, // 替换为项目内的高亮主题色即可，比如品牌主色
          borderWidth: 1.5 // 可选：边框轻微加粗，高亮效果更明显，不会挤压原有布局
        }
      ]}
    >
      <TextInput
        placeholder="请输入姓氏"
        onFocus={() => setIsFirstNameFocused(true)}
        onBlur={() => setIsFirstNameFocused(false)}
        // 原有配置的value、onChangeText、placeholderTextColor等属性全部保留即可
        style={{ flex: 1, paddingHorizontal: 12 }} // 没加输入框内边距的话可以补上，避免文字贴边
      />
    </View>
  );
};

样式部分 #

原有firstNameView样式完全保留，不需要做任何调整：

const styles = StyleSheet.create({
  firstNameView:{
    width:'90%',
    height:'80%',
    borderWidth:1,
    alignItems:'center',
    justifyContent:'center',
    flexDirection:'row',
    marginStart:10,
    marginTop:40,
    marginLeft:10,
    backgroundColor:COLORS.grey,
    borderRadius:5,
    borderColor:COLORS.grey
  },
  // 其他原有样式保持不变
});

可选优化 #

• 想要高亮效果更柔和，可以在聚焦时把容器背景色替换为比COLORS.grey更浅的同色系颜色
• 安卓端可给聚焦状态追加elevation: 2实现轻微浮起效果，iOS端可对应配置阴影属性提升质感
• 如果页面存在多个输入框，每个输入框单独定义对应的聚焦状态即可，复用完全相同的逻辑

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