Как показать данные из Firebase на сборщике в реагировать родной - PullRequest
Новая
       13

Как показать данные из Firebase на сборщике в реагировать родной

0 голосов
/ 25 февраля 2019

Я пытаюсь показать данные из базы данных Firebase на сборщике.Моя таблица данных называется категория.он содержит десять категорий с именем и значением.Например, АВТОМОБИЛЬ: C, Автобус: B, Джип: J, Ниже приведен код «Мой код». Как я могу показать эти данные на моем сборщике? NB: Я нуб, поэтому, пожалуйста, объясните и покажите код, помня об этом. 

import React from 'react';
import { StyleSheet, Text, View, TextInput, Picker } from 'react-native';
import DateTimePicker from 'react-native-modal-datetime-picker';
import moment from 'moment';
import * as firebase from 'firebase';
import {firebaseConfig} from './ApiKeys';

if (!firebase.apps.length) { firebase.initializeApp(firebaseConfig); }
console.ignoredYellowBox = ['Setting a timer',];
export default class App extends React.Component {
  constructor(props){
    super(props)

    this.state=({ 

      isDateTimePickerVisible: false,
      selecteddate:'Date',
      category:0,
    })
  }

  componentDidMount() {
    this._loadInitialState();

  }
  _loadInitialState = () => {
    firebase.database().ref('category/').once('value', function (snapshot) {
      temp = snapshot;
      snapshot.forEach(userSnapshot => {
        var k = userSnapshot.key;
        var name = userSnapshot.val();
        console.log("k="+ k +" "+"name="+name); //Showing Data correctly
      });

  });
     };

  _showDateTimePicker = () => this.setState({ isDateTimePickerVisible: true });

  _hideDateTimePicker = () => this.setState({ isDateTimePickerVisible: false });

  _handleDatePicked = (pickeddate) => {
    day   = pickeddate.getDate();
    month = pickeddate.getMonth();
    year  = pickeddate.getFullYear();
    console.log('A date has been picked: ' + day + '-' + month + '-' + year);
    exdate= moment(pickeddate).format('HH:mm')
    this.setState({selecteddate : exdate})
    this._hideDateTimePicker();
    console.log("cat "+ this.state.category)
  };

  onFocus = () => {
    this._handleDatePicked();
  }

  render() {
    return (
      <View style={styles.container}>
        <Text>Open up App.js to start working on your app!</Text>
        <Text 

        onPress={ () => this._showDateTimePicker() }
        value={this.state.selecteddate}
        //editable={false} 
        //selectTextOnFocus={false}
        >{this.state.selecteddate}</Text>
        {/* //--------------------------------------DateTimePicker */}
        <DateTimePicker
                      isVisible={this.state.isDateTimePickerVisible}
                      onConfirm={this._handleDatePicked}
                      onCancel={this._hideDateTimePicker}
                      mode={'time'}
                      datePickerModeAndroid={'spinner'}


                    />
            {/* //-------------------------------------- */}
            <Picker
              selectedValue={this.state.language}
              style={{height: 50, width: 100}}
              onValueChange={(itemValue, itemIndex) =>
                this.setState({language: itemValue})
              }>
              {/* <Picker.Item label="Java" value="java" />
              <Picker.Item label="JavaScript" value="js" /> */}
              {/* -------------------Dynamic Picker Data------------------ */}

              {/* -------------------------------------------------------- */}
            </Picker>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});
...