如何使用React Native将子级移出Firebase数据库节点

时间:2019-01-31 22:00:41

标签: javascript firebase react-native firebase-realtime-database

我在Firebase数据库的名为-事件的节点中有事件列表,如下图所示:

enter image description here

我想使用ReactNative将其中的大部分从-事件移动到另一个节点,但是我不知道如何更改当前正在读取数据库的代码(请参见下文) 。谁能帮我这个?我认为这应该很容易,但是我根本看不到它。

import React from 'react';

import {
  ListView,
  StyleSheet,
  Text,
  View,
  TouchableHighlight,
  AlertIOS
} from 'react-native';
import {
  Constants
} from 'expo';
import firebase from './firebase';
import GiftedSpinner from 'react-native-gifted-spinner';

const ActionButton = require('../Firebase/ActionButton');
const ListItem = require('../Firebase/ListItemEvents');
const styles = require('../Firebase/styles.js');

export default class Events extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
      dataSource: new ListView.DataSource({
        rowHasChanged: (row1, row2) => row1 !== row2,
      }),
    };
    this.itemsRef = this.getRef().child('-Events').limitToLast(5);
  }

  getRef() {
    return firebase.database().ref();
  }

  listenForItems(itemsRef) {
    itemsRef.on('value', (snap) => {
      var items = [];
      snap.forEach((child) => {
        items.push({
          categoria: child.val().categoria,
          durata: child.val().durata,
          descriere: child.val().descriere,
          endan: child.val().endan,
          endminute: child.val().endminute,
          endora: child.val().endora,
          headline: child.val().headline,
          imageUrl: child.val().imageUrl,
          localitatea: child.val().localitatea,
          luna: child.val().luna,
          endluna: child.val().endluna,
          nrPeople: child.val().nrPeople,
          ora: child.val().ora,
          organizator: child.val().organizator,
          strada: child.val().strada,
          ziua: child.val().ziua,
          link: "https://firebasestorage.googleapis.com/v0/b/xxxxxxxxx.appspot.com/o/" + child.val().imageUrl.replace(/ /g, "%20").split("/")[3] + "?alt=media",
          _key: child.key
        });
      });

      this.setState({
        dataSource: this.state.dataSource.cloneWithRows(items),
      });

    });
  }

  componentDidMount() {
    this.listenForItems(this.itemsRef);
  }

  render() {
    return ( <
      View style = {
        styles.container
      } > {} <
      ListView dataSource = {
        this.state.dataSource
      }
      renderRow = {
        this._renderItem.bind(this)
      }
      enableEmptySections = {
        true
      }
      style = {
        styles.listview
      }
      />

      <
      /View>
    )
  }


  _addItem() {
    AlertIOS.prompt(
      'Add New Item',
      null, [{
          text: 'Cancel',
          onPress: () => console.log('Cancel Pressed'),
          style: 'cancel'
        },
        {
          text: 'Add',
          onPress: (text) => {
            this.itemsRef.push({
              title: text
            })
          }
        },
      ],
      'plain-text'
    );
  }

  _renderItem(item) {

    const onPress = () => {
      AlertIOS.alert(
        'Complete',
        null, [{
            text: 'Complete',
            onPress: (text) => this.itemsRef.child(item._key).remove()
          },
          {
            text: 'Cancel',
            onPress: (text) => console.log('Cancelled')
          }
        ]
      );
    };

    return ( <
      ListItem item = {
        item
      }
      onPress = {
        onPress
      }
      />
    );
  }

}

这个问题与this one类似,但是我认为有人使用的是Java代码,但是我想在React Native中使用它

0 个答案:

没有答案