如何让react-native-paper的TextInput始终保持聚焦样式？

你可以通过react-native-paper的persistentLabel属性轻松实现需求，无需修改组件核心行为，也不用强制设置焦点状态。

当设置persistentLabel={true}时，TextInput的label会始终固定在输入框顶部，不会随聚焦状态或输入内容变化回到输入区域内，同时placeholder会正常显示在输入框中，完全符合你想要的视觉效果。

修改后的代码如下：

<TextInput
  placeholder="Enter Your First Name"
  label="First Name"
  value={firstName}
  onChangeText={(text) => setFirstName(text)}
  style={styles.input}
  left={<TextInput.Icon icon="account-outline" />}
  persistentLabel={true} // 添加该属性实现需求
/>

方案优势 #

• 基于react-native-paper原生属性实现，无需自定义样式或修改组件逻辑
• 不会触发输入框自动聚焦（避免不必要的键盘弹出）
• 保留TextInput所有默认交互行为，仅调整label显示逻辑

如果你的react-native-paper版本低于v4（persistentLabel属性不存在），可以用以下替代方案：手动设置focused={true}并配合autoFocus={false}强制应用聚焦样式：

<TextInput
  placeholder="Enter Your First Name"
  label="First Name"
  value={firstName}
  onChangeText={(text) => setFirstName(text)}
  style={styles.input}
  left={<TextInput.Icon icon="account-outline" />}
  focused={true}
  autoFocus={false}
/>

注意：这种方式在部分版本中可能影响输入框交互状态，优先推荐persistentLabel方案。

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