React Native Render Html中获取video标签src属性值的问题

你当前的问题出在对renderers回调参数的理解上——自定义渲染器的回调函数不会直接传入单个属性值，而是接收一个包含当前标签所有属性、子元素等信息的对象。要获取video标签的src属性，需要从这个对象的attributes字段里提取。

修正后的代码示例 #

video: ({ attributes }) => {
  // 从attributes中获取src属性值
  const videoSrc = attributes.src;
  console.log('视频地址:', videoSrc);
  
  // 处理src为空的情况，避免报错
  if (!videoSrc) {
    return null;
  }
  
  return(
    <Video
      source={{ uri: videoSrc }}
      style={{ width: 100, height: 100, alignSelf: 'center', backgroundColor: 'blue' }}
      resizeMode={ResizeMode.CONTAIN}
      shouldPlay={false}
      isLooping
      isMuted
      useNativeControls
    />
  )
},

关键说明 #

• renderers中每个标签的渲染函数，参数是一个包含以下核心字段的对象：
  • attributes: 当前HTML标签的所有属性键值对（比如video的src、width等）
  • children: 当前标签下的子元素渲染结果
  • domNode: 原始的DOM节点对象（如果需要更底层的信息）
• 如果你的src是相对路径，可能需要额外拼接基础域名，确保Video组件能正确加载资源。

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