我如何将Firebase输出更改为具有本机反应的文本 [英] how do i change firebase output to text with native react from what i have now

问题描述

我想让输出在任何输出(更新，删除，创建)上说一个"hi"而不是-LrM8rlKq1-dSW6XRt0 _({"color:'blue"})，以及如何隐藏seletedid(-LrM8rlKq1-dSW6XRt0_)不在显示器上显示

I want to get the output to say a just 'hi' instead of -LrM8rlKq1-dSW6XRt0_({"color: 'blue"}) on any of the outputs(update, delete, create ), and how do I hide seletedid(-LrM8rlKq1-dSW6XRt0_) from showing up on the display

//////////////////////////////////////////////////////////////////////////////////////////////////////////////

/////////////////////////////////////////////////////////////////////////////////////////////////////////

 import React, { Component } from 'react';
    import { View, Text, StyleSheet, Button, TextInput, TouchableOpacity } from 'react-native';
    import firebase from './firebase';
    export default class App extends Component {
    carDatabase = firebase.database().ref('car');
     state = { cars: {}, selectedId: '' }
     // Read
     componentDidMount() {
       this.carDatabase.on('value', cars => {
         const carsJSON = cars.val();
         this.setState({ cars: carsJSON === null ? {} : carsJSON });
       })
       // this.carDatabase.push({color: 'yellow'})
     }
     // Create
     create() {
       this.carDatabase.push({color: 'yellow'})  
       this.setState({selectedId: ''})
     }
     // Update
     update() {
      this.carDatabase.child(this.state.selectedId).set({color: 'blue'}) 
      this.setState({selectedId: ''})
    }
     // Delete
     deleteCar() {
        if(this.state.selectedId === '') {
          return;

        }

       this.carDatabase.child(this.state.selectedId).set(null)
      this.setState({selectedId: ''})
    }
        render() {
            return (
                <View style={styles.container}>
                 <TextInput value={this.state.selectedId} style={styles.textInput}></TextInput>
                   <Button title="create" onPress={() => this.create()}></Button> 
                   <Button title="update" onPress={() => this.update()}></Button> 
                   <Button title="delete" onPress={() => this.deleteCar()}></Button> 
           {
             Object.keys(this.state.cars).map( (carId, index) =>
               <TouchableOpacity key={index} onPress={() => this.setState({ selectedId: carId})}>
                 <Text>{`${carId}: ${JSON.stringify(this.state.cars[carId])}`}</Text>
               </TouchableOpacity>
             )
           }

           {/* <Text>{JSON.stringify(this.state.cars, null, 2)}</Text> */}
         </View>
            );
        }
    }
    const styles = StyleSheet.create({
     textInput: {
       backgroundColor: 'green',
       height: 30,
       width: '100%'
     },
        container: {
            flex: 1,
            backgroundColor: '#fff',
            alignItems: 'center',
            justifyContent: 'center'
     }
    });


  [1]: https://i.stack.imgur.com/tQHSK.jpg

推荐答案

我在这里不太了解您的问题:只需删除代码的这一部分

I don't really understand your problem here: Just remove this part of your code

{
   Object.keys(this.state.cars).map( (carId, index) => (
      <TouchableOpacity key={index} onPress={() => this.setState({ selectedId: carId})}>
         <Text>{`${carId}: ${JSON.stringify(this.state.cars[carId])}`}</Text>
      </TouchableOpacity>
   )
}

并替换为:

{
   Object.keys(this.state.cars).map( (carId, index) => (
         <Text style={{color: this.state.cars[carId].color}}>hi !</Text>
   )
}

这篇关于我如何将Firebase输出更改为具有本机反应的文本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！