使用 React Native 的 Webview 和 listview 中的 Youtube 视频

Posted 2023-05-07

【中文标题】使用 React Native 的 Webview 和 listview 中的 Youtube 视频

【英文标题】：Youtube video in Webview and listview using React Native

【发布时间】：2018-02-20 17:46:03

【问题描述】：

我是 React Native 的新手。我面临 Youtube 视频仅播放音频的问题。下面是我现在使用的代码：

import React,  Component  from 'react'

import 
   View,
   ListView,
   WebView,
   StyleSheet,
   ScrollView

from 'react-native'

 url=[
    
    "videourl":"https://www.youtube.com/embed/ZnvJvZAJZPk",
    ,
    
    "videourl":"https://www.youtube.com/embed/HOI8nlFa86U",
    ,
    
    "videourl":"https://www.youtube.com/embed/0bDI_rAMV68",
    ,
    ]

class WebViewExample extends Component

  constructor (props) 
    super (props);

    const ds = new ListView.DataSource(
      rowHasChanged: (r1, r2) => r1 !== r2
    );

    this.state = 
      dataSource: ds.cloneWithRows(url),
    ;
  

  render()
    return (
      <ListView
        dataSource= this.state.dataSource 
        renderRow=this.renderRows.bind(this)
      />
    );
  
  renderRows(rowData)
    console.log("url: "+rowData.videourl);
    return(
      <View style=styles.container>
        <View style=borderWidth:3, borderColor : '#FF0000', flex:1>
          <WebView source=uri: rowData.videourl style= />
        </View>
      </View>
    );
  

export default WebViewExample;

const styles = StyleSheet.create(
   container: 
      height: 350,
   
)

React 原生版本：0.47

【问题讨论】：

我可以在移动设备上观看视频。可能是世博会不支持该视频。

您好，感谢您的回复。我正在使用android模拟器进行测试。但仍然只播放音频。

【参考方案1】：

虽然代码是正确的，但它会抛出错误，因为您必须将url 称为const

const url=[
    
    "videourl":"https://www.youtube.com/embed/ZnvJvZAJZPk",
    ,
    
    "videourl":"https://www.youtube.com/embed/HOI8nlFa86U",
    ,
    
    "videourl":"https://www.youtube.com/embed/0bDI_rAMV68",
    ,
    ];

查看Expo

注意：视频不会在 Expo 网页版中显示，但您可以在移动版中看到。

【讨论】：

你的血值得装瓶:)

添加“const”后也面临同样的问题。

我猜是模拟器。因为我无法在我的模拟器上看到，但是当我将相同的代码放在我的手机上时。视频完全没问题。因此，请尝试在移动设备上使用相同的代码。检查this link