在 React Native 中使用 firebase 进行搜索

Question

我是 React Native 和 Firebase 的新手。我想制作一个搜索栏，可以根据 Barcode 值从 firebase 搜索所有数据，但是我在做的时候遇到了一些错误。我认为我的代码在某处有误，但不知道在哪里。我已将 firebase 凭据转移到 dbConfig.js 。这是我的 firebase 数据 firebase data 和我的 code:

import React,{Component} from 'react';
import { View, Text,TextInput,StyleSheet,Image, Button} from 'react-native';

import firebase from './dbConfig';

export default class ListItem extends Component {

render() {
        return (
<>

<View style={styles.BackGround}>
      <View style={styles.SectionStyle}>
    <Image
        source={require('./mic.png')} //mic image here
        style={styles.ImageStyle}
    />


    <TextInput
        style={{ flex: 1, justifyContent: 'center', textAlign: 'center', fontSize: 12}}
        placeholder="Search for Product"
        underlineColorAndroid="transparent"
        //onChangeText={(text) => this.setState({data: text})}
        onSubmitEditing = {(text)=> this.setState({data: text})}
        value = {this.state.data}
       // onSubmitEditing={()=>this._search}
        //onSubmitEditing={()=>this.componentWillMount}
    />
    <Image
        source={require('./usr.png')} //icon image here
        style={styles.ImageStyle2}
    />
</View>


             <View>
             <Text>{this.state.items}</Text> 
            </View>
</View>
            </>
        );
    }


    constructor(props){
      super(props);

     this.state= {
          items: '',
          data: '',

       };
      }
    componentWillMount(){


      var ref = firebase.database().ref('/');

      ref.child(this.state.data).on("value", snapshot =>{

      console.log(snapshot.val().info.Price);
//if(snapshot.val().Price == this.state.data){
//this.setState({items: Object.values(snapshot.val())});
//}
//else{
 //alert('there is problem');
//}
      });
    }

}


const styles = StyleSheet.create({



  BackGround: {
    backgroundColor: '#22abb6',
    height: '100%'



   },

   SectionStyle: {
    flexDirection: 'row',
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#fff',
    // borderWidth: 0.8,
    // borderColor: '#000',
    shadowColor:'#176f75',

    marginTop: 50,
    height: 40,
    borderRadius: 10,
    margin: 10,
  },


  ImageStyle: {
    padding: 10,
    marginLeft: 10,
    margin: 5,
    height: 25,
    width: 25,
    resizeMode: 'stretch',
    alignItems: 'center',
  },
  ImageStyle2: {
    padding: 10,
    marginLeft: 10,
    marginRight: 10,
    margin: 5,
    height: 25,
    width: 25,
    resizeMode: 'stretch',
    alignItems: 'center',
  },


});

Answer 1

我通过更改以下内容来做到这一点：

 //adding this in TextInput

onSubmitEditing = {this.componentWillMount}



//on changing the function compoundWillMount to async()

 componentWillMount= async()=>{

在 React Native 中使用 firebase 进行搜索

Make Search using firebase in react native

javascript

firebase

react-native

firebase-realtime-database

react-native-android