json - 我想通过 Firebase 更新一个 webview 视频

Question

我是 React Native 的新手。我在播放我想从 Firebase 数据库中获取的 YouTube 视频 URL 时遇到问题。我可以播放带有静态链接的视频。我必须使用 webview，因为我不想使用 YouTube API。

我的代码：

import React, { Component } from 'react';
import { View, ListView, WebView, StyleSheet } from 'react-native';
import { Container, Content , Header , From , Input , Item , Button , Label, Icon ,List,ListItem} from 'native-base';
import * as firebase from 'firebase';

const firebaseConfig = {
  apiKey: "xxxxxxxxxxxxxxxxxx",
  authDomain: "stream-xxxx.xxxxxxxxxxxxxxxx.com",
  databaseURL: "https://stream-f3b1e.xxxxxxxxxxx.com",
  projectId: "stream-xxxxxxxxxxxx",
  storageBucket: "stream-xxxxx.xxxxxxxxxxxxxxx.com",
  messagingSenderId: "xxxxxxxxxxxxxxxxxx"
};
firebase.initializeApp(firebaseConfig);

var data = [];

class App extends Component{  
  constructor (props) {
    super (props);


    this.ds = new ListView.DataSource({
      rowHasChanged: (r1, r2) => r1 !== r2
    });
    // trying to do database intregration
    this.state = {
      listViewData : data,
      newContact: '',
    };

    this.state = {
      //dataSource: this.ds.cloneWithRows(data),
      dataSource : this.ds.cloneWithRows(data),
    };
  }

  componentDidUpdate(){
    var that = this
    firebase.database().ref('/link').on('child_added',function(data){
      var newData = [...that.state.listViewData]
      newData.push(data)
      that.setState({listViewData : newData}) 
    })
  }    
  render(){
    return (
      <ListView
        renderHeader={this.renderHeader.bind(this)}
        dataSource={ this.state.dataSource }
        renderRow={this.renderRows.bind(this)}
      />
    );
  }
     renderHeader(){
    return(
        <Header>
          <Content>
            <Item>
              <Input 
                placeholder='Add me'
              />
              <Button>
                <Icon name='add' />
              </Button>
            </Item>
          </Content>
        </Header>
    )
  }
  renderRows(rowData){
    console.log("data: "+rowData.val().name);
    return(
      <View style={styles.container}>
          <WebView source={{uri: rowData.data.val().name}} style={{}} />
        </View>
      </View>
    );
  }
}
export default App;

标签： jsonfirebasereact-nativewebview