我如何将firebase输出更改为具有本机反应的文本,从我现在所拥有的 [英] how do i change firebase output to text with native react from what i have now
本文介绍了我如何将firebase输出更改为具有本机反应的文本,从我现在所拥有的的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我想让输出在任何输出(更新、删除、创建)上都说嗨"而不是 -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屋!
查看全文