Question

我已经使用本机构建了一个简单的“ToDo”应用程序，我想将其与Firebase连接。我试图按照教程，但无法弄清楚如何在我的情况下这样做。我将Firebase规则（读取，写入）设置为true，因此不需要身份验证。有人可以帮助我，让我走上正轨吗？这是我到目前为止所提出的。以当前状态为例。

App.js文件：

import Note from './app/components/Note';

import * as firebase from 'firebase';

const firebaseConfig = {
  apiKey: "XXXXXXXXXXXXXXXXXXXXXX",
  authDomain: "XXXXXXXXXXXXXXXXXXXXXXXXXX",
  databaseURL: "XXXXXXXXXXXXXXXXXXXXXXXXXXXX",
  projectId: "XXXXXXXXXXXXXXX",
  storageBucket: "XXXXXXXXXXXXXXXXXXXXXXXXX"
}

const firebaseApp = firebase.initializeApp(firebaseConfig);

export default class App extends React.Component {

  constructor(props) {
    super(props);

    this.noteRef = firebase.database().ref().child('note');

    this.state={
      noteArray: [{'date':'2/17/2012','note':'new'}]
    };

    this.note=[];
  }

  componentDidMount(){
    this.noteRef.on('child_added', (dataSnapshot)=>{
      this.note.push({id:dataSnapshot.key(), date: dataSnapshot.val(), note: dataSnapshot.val()});
    });
  }

  render() {
    let notes = this.state.noteArray.map((val, key)=>{
      return <Note key={key} keyval={key} val={val} deleteMethod={ ()=>this.deleteNote(key)}/>
    });
    return (
      <KeyboardAvoidingView behavior='padding' style={styles.container}>
        <View style={styles.header}>
          <Text style={styles.headerText}> Notekiip </Text>
        </View>

        <ScrollView style={styles.scrollContainer}>
          {notes}
        </ScrollView>

        <View style={styles.footer}>
          <TouchableOpacity onPress={this.addNote.bind(this)} style={styles.addButton}>
            <Text style={styles.addButtonText}>+</Text>
          </TouchableOpacity>

          <TextInput style={styles.textInput}
            onChangeText={(noteText)=> this.setState({noteText})} value={this.state.noteText}
            placeholder='Type note here' placeholderTextColor='white' underlineColorAndroid='transparent'>
          </TextInput>
        </View>

      </KeyboardAvoidingView>
    );
  }

  addNote() {
    if (this.state.noteText){
      var d = new Date();
      this.state.noteArray.push({date: d.getFullYear() + '/' + (d.getMonth() 
      + 1)  + '/' + d.getDate(), 'note': this.state.noteText});
      this.setState({noteArray: this.state.noteArray})
      this.setState({noteText: ''});
    }
  }

  deleteNote(key){
    this.state.noteArray.splice(key,1);
    this.setState({noteArray: this.state.noteArray});
  }
}

Note.js文件：

export default class Note extends React.Component {
  render() {
    return (
      <View key={this.props.keyval} style={styles.note}>

        <Text style={styles.noteText}>{this.props.val.date}</Text>
        <Text style={styles.noteText}>{this.props.val.note}</Text>

        <TouchableOpacity onPress={this.props.deleteMethod} style={styles.noteDelete}>
          <Text style={styles.noteDeleteText}>D</Text>
        </TouchableOpacity>
      </View>
    );
  }
}

将数据从React Native App传递到Firebase

0 个答案: