React Native中如何为关闭模态框的按钮替换更美观的图标

我需要在React Native中创建一个关闭模态框的按钮，按钮配置已经完成，但插入图标时遇到问题。我的按钮组件代码如下：

const Boton = ({ onPress, title, styleB, styleT }) => (
  <TouchableOpacity
    style = {styleB}
    onPress={onPress}
  >
    <Text style = {styleT}>{title}</Text>
  </TouchableOpacity>
);

当前使用方式：

<View style={styles.modalContainer}>
        <View style={styles.modalContent}>
          <Text style={styles.messageText}>Es apto para tu régimen</Text>
          
          <View style={styles.buttonContainer}>
            <BotonDetalle title="Ver Recetas" onPress={verRecetas} />
          </View>
          
          <Boton onPress = {onClose} styleB={styles.closeButton} styleT={styles.buttonText} title="↓"/>
          
        </View>
      </View>

希望把按钮title里的箭头符号换成更美观的箭头图标，求最简单的实现方式，之前搜的方案都太复杂了。

最简单方案1：用美观的Unicode箭头字符（无需额外依赖） #

完全不用修改现有Boton组件，直接把title换成更精致的Unicode箭头即可，比如：

<Boton onPress={onClose} styleB={styles.closeButton} styleT={styles.buttonText} title="🔽"/>

或者想要更纤细的样式：

<Boton onPress={onClose} styleB={styles.closeButton} styleT={styles.buttonText} title="⌄"/>

这类Unicode图标可以直接当作文本使用，和现有组件完美兼容，不需要安装任何额外库，零成本替换。

方案2：支持图标组件（仅需少量修改） #

如果想要更多风格统一的图标，可使用react-native-vector-icons的Ionicons，步骤极简：

1. 安装依赖：

npm install react-native-vector-icons --save

2. 修改Boton组件，支持传入图标：

import Ionicons from 'react-native-vector-icons/Ionicons';

const Boton = ({ onPress, title, styleB, styleT, iconName, iconSize, iconColor }) => (
  <TouchableOpacity
    style={styleB}
    onPress={onPress}
  >
    {iconName ? (
      <Ionicons name={iconName} size={iconSize || 24} color={iconColor || styleT?.color} />
    ) : (
      <Text style={styleT}>{title}</Text>
    )}
  </TouchableOpacity>
);

3. 使用时传入关闭箭头的图标名：

<Boton onPress={onClose} styleB={styles.closeButton} iconName="chevron-down" iconSize={28} iconColor="#fff"/>

这个方案能提供更多风格统一的图标，安装和修改步骤都很简洁，没有复杂配置。

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