如何移除react-native-paper-dates日期选择器右侧人物图标或添加自定义图标

方法1：通过props直接隐藏 #

react-native-paper-dates的DatePickerModal在范围模式下，右上角的人物图标可通过personIcon props设置为'none'来隐藏，修改代码如下：

<DatePickerModal
  locale="en"
  mode="range"
  visible={open}
  onDismiss={onDismiss}
  onConfirm={onConfirm}
  closeIcon={customCloseIcon}
  calendarIcon={'none'}
  personIcon={'none'} // 新增此行隐藏人物图标
/>

方法2：样式覆盖（适配部分版本） #

如果上述props无效，可通过自定义主题隐藏图标：

import { useTheme } from 'react-native-paper';

const theme = useTheme();

<DatePickerModal
  locale="en"
  mode="range"
  visible={open}
  onDismiss={onDismiss}
  onConfirm={onConfirm}
  closeIcon={customCloseIcon}
  calendarIcon={'none'}
  theme={{
    ...theme,
    components: {
      ...theme.components,
      DatePickerModal: {
        ...theme.components?.DatePickerModal,
        rangeToggleIcon: { display: 'none' }
      }
    }
  }}
/>

替换人物图标为自定义组件，只需将personIcon props设置为你的自定义图标组件即可：

// 示例：使用react-native-vector-icons自定义图标
import Icon from 'react-native-vector-icons/Ionicons';

const CustomIcon = () => (
  <Icon name="calendar-outline" size={24} color="#666" />
);

<DatePickerModal
  locale="en"
  mode="range"
  visible={open}
  onDismiss={onDismiss}
  onConfirm={onConfirm}
  closeIcon={customCloseIcon}
  calendarIcon={'none'}
  personIcon={<CustomIcon />} // 传入自定义图标
/>

注：不同版本的react-native-paper-dates可能存在props名称差异，若上述方法无效，请核对当前版本的官方文档确认对应控制项。

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