React Native中如何将对象属性拼接为可复用变量用于邮件内容

架构老林

2026-10-3

实现方案

你可以单独抽离格式化地址的复用逻辑，同时处理空值过滤和URL编码适配mailto规则，具体实现如下：

步骤1：定义可复用的格式化地址变量

建议放在组件内部，依赖地址变化自动更新，所有用到地址的位置（主题/正文）直接调用即可：

import { useMemo } from 'react';

// 组件内部定义
const formattedAddress = useMemo(() => {
  const addressInfo = activeUser.rentalUnit?.address;
  // 地址不存在时返回空字符串
  if (!addressInfo) return '';
  // 过滤空字段后拼接，避免出现多余空格
  const addressPart = [
    addressInfo.street,
    addressInfo.houseNumber,
    addressInfo.postCode,
    addressInfo.city
  ].filter(Boolean);
  return addressPart.join(' ');
}, [activeUser.rentalUnit?.address]);

如果需要多组件复用，也可以把这段逻辑封装为通用工具函数，传入address对象直接返回格式化后的结果。

步骤2：改造邮件发送逻辑

所有传入mailto链接的自定义内容必须做URL编码，避免特殊字符（空格、&、特殊符号等）导致参数解析失败：

const onSendMail = () => {
  const receiveEmail = activeUser.rentalUnit?.complex?.email || 'info@woonzorg.nl';
  // 拼接带地址的主题，匹配你需要的Vul uw vraag, naam en adres in{address}格式
  const finalSubject = encodeURIComponent(`${Strings.Board.EmailSubject}${formattedAddress}`);
  // 拼接带地址的正文
  const finalBody = encodeURIComponent(`${Strings.Board.EmailText} ${formattedAddress}`);

  Linking.openURL(
    `mailto:${receiveEmail}?subject=${finalSubject}&body=${finalBody}`
  );
};