Question

问题：

我是本机和Firebase的新手。我正在制作火车时刻表系统。在那里，我实现了搜索功能。这就是该组件的外观。

import React, { Component } from "react";
import {
  StyleSheet,
  Text,
  TextInput,
  View,
  TouchableOpacity,
  Dimensions,
  Picker,
  ListView
} from "react-native";

import {
  Ionicons,
  Foundation,
  Entypo,
  MaterialCommunityIcons,
  FontAwesome,
  MaterialIcons
} from "@expo/vector-icons";

import app from "../../config/db";

import { Autocomplete } from "react-native-autocomplete-input";

import { addItem } from '../../services/stationService';

const { height, width } = Dimensions.get("window");
const box_width = width / 2 + 40;

export default class TicketForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      start: "",
      end: "",
      class: "",
      isLoading:false
    };
  }

  static navigationOptions = {
    title: "Tickets",
    headerStyle: {
      backgroundColor: "#2b78fe"
    },
    headerTintColor: "#fff",
    headerTitleStyle: {
      color: "#ffff"
    }
  };

  search =()=>{
    app.database().ref('/trains').on("value").then(snapshot=>{
      console.log(snapshot);
    })
  }

  render() {
    var ds = new ListView.DataSource({ rowHasChanged: (r1, r2) => r1 !== r2 });
    return (
      <View style={styles.form}>
        <View style={styles.inputSection}>
          <TextInput
            style={styles.input}
            placeholder="From"
            onChangeText={start => {
              this.setState({ start: start });
            }}
            underlineColorAndroid="transparent"
          />
          <MaterialCommunityIcons
            style={styles.inputicon}
            name="backspace"
            size={30}
            color="#42a5f5"
          />
        </View>
        <View style={styles.inputSection}>
          <TextInput
            style={styles.input}
            placeholder="To"
            onChangeText={end => {
              this.setState({ end: end });
            }}
            underlineColorAndroid="transparent"
          />
          <MaterialCommunityIcons
            style={styles.inputicon}
            name="backspace"
            size={30}
            color="#42a5f5"
          />
        </View>
        <View style={styles.classSection}>
          <Picker
            selectedValue={this.state.class}
            style={{ height: 50, width: box_width }}
            onValueChange={(itemValue, itemIndex) =>
              this.setState({ class: itemValue })
            }
          >
            <Picker.Item label="1 st Class" value="1" />
            <Picker.Item label="2 nd Class" value="2" />
            <Picker.Item label="3 rd Class" value="3" />
          </Picker>
        </View>

        <View style={styles.buttonCoontainer}>
          <View style={styles.searchContainer}>
            <TouchableOpacity onPress={this.search}>
              <View style={styles.search}>
                <Text style={styles.searchText}>Search</Text>
                <Ionicons name="ios-search" size={30} color="#fff" />
              </View>
            </TouchableOpacity>
          </View>
        </View>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  form: {
    flex: 1,
    borderWidth: 3,
    borderRadius: 8,
    borderColor: "#ffff",
    backgroundColor: "#ffff",
    marginTop: 15,
    marginLeft: 15,
    marginRight: 15,
    marginBottom: 5,
    paddingTop: 50,
    paddingLeft: 20,
    paddingRight: 20
  },
  input: {
    width: box_width,
    flex: 1,
    paddingTop: 5,
    paddingRight: 5,
    paddingBottom: 5,
    paddingLeft: 0,
    backgroundColor: "#fff",
    color: "#424242"
  },
  inputSection: {
    flexDirection: "row",
    justifyContent: "center",
    alignItems: "center",
    backgroundColor: "#fff",
    borderColor: "#78909c",
    borderWidth: 0.8,
    paddingLeft: 5,
    paddingRight: 5,
    marginTop: 10,
    marginBottom: 10
  },
  classSection: {
    flexDirection: "row",
    justifyContent: "center",
    alignItems: "center",
    backgroundColor: "#e9ebee",
    borderColor: "#e9ebee",
    borderWidth: 0.8,
    paddingLeft: 5,
    paddingRight: 5,
    marginTop: 10,
    marginBottom: 10
  },
  dateSection: {
    justifyContent: "center",
    alignItems: "center",
    backgroundColor: "#fff",
    paddingLeft: 5,
    paddingRight: 5,
    marginTop: 10,
    marginBottom: 10,
    width: 335
  },
  inputIcon: {
    padding: 10
  },
  reverseContainer: {
    flexDirection: "row",
    marginTop: 30
  },
  reverse: {
    flexDirection: "row",
    borderWidth: 0.5,
    borderColor: "#eff0f1",
    borderRadius: 5,
    width: box_width / 2,
    paddingTop: 3,
    paddingBottom: 3,
    paddingLeft: 20,
    paddingRight: 10,
    marginLeft: 0,
    marginRight: 20,
    backgroundColor: "#eff0f1"
  },
  reset: {
    flexDirection: "row",
    borderWidth: 0.5,
    borderColor: "#eff0f1",
    borderRadius: 5,
    width: box_width / 2,
    paddingTop: 3,
    paddingBottom: 3,
    paddingLeft: 20,
    paddingRight: 10,
    marginLeft: box_width / 4,
    marginRight: 0,
    backgroundColor: "#eff0f1"
  },
  reverseText: {
    marginTop: 3,
    marginRight: 10
  },
  resetText: {
    marginTop: 3,
    marginRight: 10
  },
  searchContainer: {
    flexDirection: "row",
    marginTop: 30
  },
  search: {
    alignItems: "center",
    flexDirection: "row",
    borderWidth: 0.5,
    borderColor: "#2089dc",
    borderRadius: 5,
    width: box_width + 80,
    paddingTop: 6,
    paddingBottom: 6,
    paddingLeft: box_width / 2,
    paddingRight: 10,
    marginLeft: 0,
    marginRight: 20,
    backgroundColor: "#2089dc"
  },
  searchText: {
    marginTop: 3,
    marginRight: 10,
    fontSize: 15,
    fontWeight: "700",
    color: "#ffff"
  },
  searchIcon: {
    fontWeight: "700"
  }
});

当我按下搜索按钮时，它给我一个错误。在这里，我指定了如何在搜索功能中实现操作。

app.database().ref('/trains').on("value").then(snapshot=>{
      console.log(snapshot);
    })

这是我在应用中配置Firebase并将其导入到当前组件中的方式。

import Firebase from 'firebase';
 let config = {
    apiKey: "My Key",
    authDomain: "my domain",
    databaseURL: "https://mytrain-5beba.firebaseio.com",
    projectId: "mytrain-5beba",
    storageBucket: "mytrain-5beba.appspot.com",
    messagingSenderId: "305193513552"
  };
let app = Firebase.initializeApp(config);
// export const db = app.database();

export default app;

这是我的数据库在控制台中的外观。

有人可以帮助我从我的本机应用程序正确查询此数据库吗？非常感谢。

Answer 1

您可以尝试以下操作：

.database()
            .ref('/trains/')
            .on('value', snapshot => {
                const trains = snapshot.val();
                console.warn(trains);                
            });

如何使用EXPO React Native应用程序从Firebase获取数据

1 个答案: