如何从firebase实时数据库中渲染ScrollView React Native（expo cli）中的数据？

Question

我正在开发一个连接到 Firebase 实时数据库的 ToDo 应用。一切正常。我也可以将数据存储在 Firebase 数据库中，但问题是我无法从数据库中获取任何数据。我想在 ScrollView 中渲染数据，这样当我打开我的应用时，数据可以在 ScrollView 中显示。

Main.js

    import React, { Component } from 'react';
    import {
        StyleSheet,
        Text,
        View,
        TextInput,
        ScrollView,
        TouchableOpacity
    } from 'react-native';
    
    import Note from './Note';
    import firebase from './firebase';
    
    export default class Main extends React.Component {
    
        constructor(props) {
            super(props);
    
            this.state = {
                noteArray: [],
                noteText: ''
            }
    
        }
    
        render() {

 let notes = () => {
    firebase.database().ref(`todos`).on('value', function (snapshot) {
      return <Note key={snapshot.val().key} keyval={snapshot.val().key} val={snapshot.val().note}
                    deleteMethod={() => this.deleteNote(key)}
                />
    });
  }
    
           
            return (
                <View style={styles.container}>
                    <View style={styles.header}>
                        <Text style={styles.headerText}>Todo</Text>
                    </View>
    
                    <ScrollView style={styles.scrollContainer}>
                        {notes}
                    </ScrollView>
    
                    <View style={styles.footer}>
                        <TextInput
                            style={styles.textInput}
                            onChangeText={(noteText) => this.setState({ noteText })}
                            value={this.state.noteText}
                            placeholder='Enter Task'
                            placeholderTextColor='white'
                            underlineColorAndroid='transparent'>
                        </TextInput>
                    </View>
    
    
                    <TouchableOpacity onPress={this.adTask.bind(this)} style={styles.addButton}>
                        <Text style={styles.addButtonText}>Add</Text>
    
                    </TouchableOpacity>
    
                </View>
    
            );
        }
    
        adTask() {
            if (this.state.noteText) {
                var date = new Date();
    
                var database = firebase.database().ref('todos');
                var key = database.push().key;
    
                var todo = {
                    'date': date.getDay() +
                        '/' + (date.getMonth() + 1) +
                        '/' + date.getFullYear(),
                    'note': this.state.noteText,
                    key: key
                }
                database.child(key).set(todo);
    
                this.setState({ noteArray: this.state.noteArray });
                this.setState({ noteText: this.state.noteText });
                this.setState({
                    noteText: this.state.noteText = ""
                })
            }
        }

note.js

     import React from 'react';
    import { StyleSheet, Text, View, TouchableOpacity } from 'react-native';
    import { AntDesign } from '@expo/vector-icons';
    
    export default class Main extends React.Component {
    
        render() {
            return (
                <View key={this.props.keyval} style={styles.note}>
                    <Text style={styles.noteText}>{this.props.val.note}</Text>
                    <Text style={styles.noteDate}>{this.props.val.date}</Text>
    
                    <TouchableOpacity onPress={this.props.deleteMethod} style={styles.noteDelete}>
                        <Text style={styles.noteDeleteText}><AntDesign name="delete" size={24} color="black" /></Text>
                    </TouchableOpacity>
    
                </View>
    
            );
        }
    }

Answer 1

您已经删除了 noteArray 状态变量，但您根本没有使用它。理想情况下，您应该为realtime database 设置一个数据更改侦听器，并在数据更改时更新您的本地状态。您可以设置一个侦听器函数并在您的Main.js 文件componentDidMount 生命周期方法中调用它。

在此函数中，您可以使用从实时数据库接收到的值更新您的本地状态noteArray。然后，您可以映射 noteArray 以借助滚动视图在应用程序中显示您的笔记。我个人建议你在这个用例中使用 react native 的 FlatList 实现，因为这个笔记数组会随着时间的推移而增长。这将帮助您解决在长列表和滚动视图的情况下可能面临的性能问题。

Main.js

import React, { Component } from 'react';
import {
  StyleSheet,
  Text,
  View,
  TextInput,
  ScrollView,
  TouchableOpacity,
  FlatList
} from 'react-native';
import Note from './Note';
import firebase from './firebase';

export default class Main extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
      noteArray: [],
      noteText: ''
    }
  }

  componentDidMount() {
    this.listenForNotes()
  }

  listenForNotes() {
    firebase.database().ref(`todos`).on('value', function (snapshot) {
      const notes = [];
      snapshot.forEach(child => {
        notes.push({
          note: child.val().name,
          date: child.val().date,
          key: child.key
        });
      });
      this.setState({
        noteArray: notes
      });
    });
  }

  adTask() {
    if (this.state.noteText) {
      var date = new Date();
      var database = firebase.database().ref('todos');
      var key = database.push().key;
      var todo = {
        'date': date.getDay() +
          '/' + (date.getMonth() + 1) +
          '/' + date.getFullYear(),
        'note': this.state.noteText,
        key: key
      }
      database.child(key).set(todo);
      this.setState({ noteText: "" });
    }
  }

  deleteNote(key) {
    // your delete note function
  }

  render() {
    return (
      <View style={styles.container}>
        <View style={styles.header}>
          <Text style={styles.headerText}>Todo</Text>
        </View>
        <FlatList
          data={noteArray}
          renderItem={({ item, index }) => {
            return (
              <Note
                key={item.key}
                note={item.note}
                date={item.date}
                deleteMethod={() => this.deleteNote(key)}
              />
            );
          }}
          key={(item) => `${item.key}`}
        />
        <View style={styles.footer}>
          <TextInput
            style={styles.textInput}
            onChangeText={(noteText) => this.setState({ noteText })}
            value={this.state.noteText}
            placeholder='Enter Task'
            placeholderTextColor='white'
            underlineColorAndroid='transparent'>
          </TextInput>
        </View>
        <TouchableOpacity onPress={this.adTask.bind(this)} style={styles.addButton}>
          <Text style={styles.addButtonText}>Add</Text>
        </TouchableOpacity>
      </View>
    );
  }
}

您还应该在Note.js 文件中进行一些更改以显示传递的道具。

Note.js

import React from 'react';
import { StyleSheet, Text, View, TouchableOpacity } from 'react-native';
import { AntDesign } from '@expo/vector-icons';

export default class Note extends React.Component {

  constructor(props) {
    super(props);
  }

  render() {
    const { note, date, key, deleteMethod } = this.props;
    return (
      <View key={key} style={styles.note}>
        <Text style={styles.noteText}>{note}</Text>
        <Text style={styles.noteDate}>{date}</Text>
        <TouchableOpacity onPress={deleteMethod} style={styles.noteDelete}>
          <Text style={styles.noteDeleteText}><AntDesign name="delete" size={24} color="black" /></Text>
        </TouchableOpacity>
      </View>
    );
  }
}