React Native中如何访问解析后JSON内带冒号的RSS字段

JS对象的点语法仅支持访问符合标识符命名规范的属性，带冒号的key不属于合法标识符，因此article.media:content这类写法会直接解析报错，以下是可直接使用的解决方法：

• 方法1：使用方括号语法取值（无需修改现有XML转JSON逻辑，成本最低）
  方括号是JS访问特殊key属性的标准语法，支持任意字符串作为属性名，你只需要把带冒号的字段名作为字符串传入即可。
  先打印转换后的原始JSON确认结构，常见的取值示例：

  // 假设转换后的article结构如下
  const article = {
    title: "文章标题",
    pubDate: "2024-05-20",
    "media:creator": "科技媒体作者",
    "media:content": {
      $: {
        url: "https://example.com/cover.jpg",
        medium: "image"
      }
    }
  }
  
  // 取值示例
  const author = article['media:creator']
  const coverUrl = article['media:content'].$.url
  

  在React Native中直接使用即可渲染：

  <View>
    <Text>{article.title}</Text>
    <Text>作者：{author}</Text>
    <Image source={{uri: coverUrl}} style={{width: '100%', height: 210}} />
  </View>
  

• 方法2：统一做字段名清洗（适合频繁访问这类字段的场景）
  如果觉得方括号写法繁琐，可以在XML转JSON完成后，加一层数据格式化逻辑，把带冒号的字段映射为符合标识符规范的驼峰字段，后续就可以正常使用点语法访问：

  const formatRSSArticle = (rawData) => {
    return {
      ...rawData,
      mediaCreator: rawData['media:creator'],
      mediaContent: rawData['media:content'],
      // 其余带命名空间的字段按同样规则映射
    }
  }
  
  // 使用时先格式化
  const article = formatRSSArticle(rawJSONResult)
  // 后续直接点语法访问
  console.log(article.mediaCreator)
  console.log(article.mediaContent.$.url)
  

• 注意事项
  部分XML转JSON库会自动拆分命名空间前缀，将media:content这类字段转为嵌套结构，即article.media.content的形式，这种情况直接用点语法访问即可。建议拿到转换结果后先打印完整JSON结构，确认key的实际格式再写取值逻辑，避免路径写错。

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