React Native iOS端如何为TextInput的占位符添加下划线？

嘿，这个需求我刚好踩过坑！要实现仅给TextInput的占位符加下划线，而不是整个输入框，你完全不用给输入框本身设置borderBottom，直接用TextInput自带的placeholderTextStyle属性就能搞定，这是专门用来定制占位符样式的API。

具体代码示例 #

import { TextInput } from 'react-native';

// 在你的组件中使用
<TextInput
  placeholder="请输入你的内容"
  // 输入框本身的样式，这里不用加borderBottom相关属性
  style={{
    height: 40,
    paddingHorizontal: 12,
    fontSize: 16,
    // 其他你需要的基础样式
  }}
  // 重点：给占位符单独设置下划线样式
  placeholderTextStyle={{
    textDecorationLine: 'underline', // 设置下划线
    textDecorationColor: '#B8B8B8', // 下划线颜色和你之前的需求一致
    textDecorationStyle: 'solid', // 可选：下划线样式，solid/dashed/dotted
    color: '#999', // 也可以顺便调整占位符的文字颜色
  }}
/>

原理说明 #

之前你用borderBottomWidth和borderBottomColor是给整个输入框添加底部边框，而placeholderTextStyle是React Native专门为占位符提供的样式入口，通过textDecorationLine: 'underline'给占位符文字添加下划线，这样：

• 当输入框为空时，占位符显示，下划线也跟着显示
• 当用户开始输入内容后，占位符自动隐藏，下划线也会消失
• 输入的内容完全不受这个样式影响，完美区分开占位符和输入内容的样式

这样就完全满足你要的“仅占位符有下划线”的需求啦！

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