React Native Paper TextInput聚焦时隐藏边框标签的实现方法

有三种实用方案可以实现需求，以下是具体实现：

方案1：聚焦时直接隐藏标签 #

通过跟踪输入框的聚焦状态，动态控制标签的显示内容：

import { useState } from 'react';
import { TextInput } from 'react-native-paper';
import AntDesign from '@expo/vector-icons/AntDesign';

// 组件内部代码
const [email, setEmail] = useState('');
const [isInputFocused, setIsInputFocused] = useState(false);

return (
  <TextInput
    mode="outlined"
    label={isInputFocused ? '' : 'Email'}
    value={email}
    onChangeText={setEmail}
    theme={{ colors: { primary: APP_COLORS.primary }}}
    selectionColor={APP_COLORS.primary}
    outlineColor={APP_COLORS.grey_low}
    left={<TextInput.Icon name={() => <AntDesign name="mail" size={22} color="black" />} />}
    onFocus={() => setIsInputFocused(true)}
    onBlur={() => setIsInputFocused(false)}
  />
);

方案2：让标签始终停留在输入框内 #

如果不想隐藏标签，而是让它一直显示在输入框内部，可通过自定义labelStyle覆盖默认的聚焦上浮行为：

import { useState } from 'react';
import { TextInput, StyleSheet } from 'react-native-paper';
import AntDesign from '@expo/vector-icons/AntDesign';

const styles = StyleSheet.create({
  fixedLabel: {
    position: 'absolute',
    top: 12,
    left: 16,
    backgroundColor: '#ffffff', // 用背景色覆盖边框，避免文字与边框重叠
    paddingHorizontal: 4,
    fontSize: 14,
  },
});

// 组件内部代码
const [email, setEmail] = useState('');

return (
  <TextInput
    mode="outlined"
    label="Email"
    value={email}
    onChangeText={setEmail}
    theme={{ colors: { primary: APP_COLORS.primary }}}
    selectionColor={APP_COLORS.primary}
    outlineColor={APP_COLORS.grey_low}
    left={<TextInput.Icon name={() => <AntDesign name="mail" size={22} color="black" />} />}
    labelStyle={styles.fixedLabel}
  />
);

方案3：完全自定义标签渲染逻辑 #

使用renderLabel属性完全控制标签的渲染，根据聚焦状态决定是否显示：

import { useState } from 'react';
import { TextInput, Text } from 'react-native-paper';
import AntDesign from '@expo/vector-icons/AntDesign';

// 组件内部代码
const [email, setEmail] = useState('');
const [isInputFocused, setIsInputFocused] = useState(false);

return (
  <TextInput
    mode="outlined"
    value={email}
    onChangeText={setEmail}
    theme={{ colors: { primary: APP_COLORS.primary }}}
    selectionColor={APP_COLORS.primary}
    outlineColor={APP_COLORS.grey_low}
    left={<TextInput.Icon name={() => <AntDesign name="mail" size={22} color="black" />} />}
    onFocus={() => setIsInputFocused(true)}
    onBlur={() => setIsInputFocused(false)}
    renderLabel={() => {
      if (isInputFocused) return null;
      return <Text style={{ fontSize: 14, color: '#666' }}>Email</Text>;
    }}
  />
);

你可以根据UI需求选择对应方案：方案1简单直接，方案2适合需要保留标签提示的场景，方案3提供最灵活的自定义空间。

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