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

Question

我是 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

Answer 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 网页版中显示，但您可以在移动版中看到。