[英]In React Native, is there a way to change the color of the button based on a boolean from a database?
所以,我是 React-Native 的真正新手,我刚刚开始尝试一些东西。 因此,我遇到了这个问题,即根据数据库上存在的 boolean 值,按钮颜色为“绿色”或“红色”。
所以,此时,我使用 Google 的“Firebase”作为我的主数据库。
这是我正在尝试解决的基本代码。
import {StatusBar} from 'expo-status-bar';
import React, {Component} from 'react';
import {StyleSheet, Text, View, Pressable, TouchableOpacity} from 'react-native';
import {initializeApp} from 'firebase/app';
import {getDatabase, ref, onValue, set} from 'firebase/database';
import {color} from 'react-native-reanimated';
const firebaseConfig = {};
initializeApp(firebaseConfig);
export default class App extends Component {
constructor() {
super();
this.state = {
l1: this.readVals('l1/'),
};
}
readVals(path) {
const db = getDatabase();
const reference = ref(db, path);
onValue(reference, (snapshot) => {
const value = snapshot.val().obj;
return value;
});
}
setVals(path) {
const db = getDatabase();
const reference = ref(db, path);
const val = this.state.l1;
set(reference, {
obj: !val
});
this.state.l1 = !val;
}
render() {
return (
<View style={styles.container}>
<Pressable
style={({pressed}) => [
{
backgroundColor: this.state.l1 ? '#FF0000' : '#00FF00',
},
styles.button,
]} onPress={() => {this.setVals('l1/')}}>
<Text style={styles.buttonText}>Button</Text>
</Pressable>
<StatusBar style="auto" />
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#FF0000',
alignItems: 'center',
justifyContent: 'center',
},
getButton: {
borderWidth: 1,
borderColor: 'rgba(0,0,0,0.5)',
alignItems: 'center',
justifyContent: 'center',
alignSelf: 'center',
borderWidth: 2,
borderRadius: 7,
marginTop: 20,
width: 100,
height: 50,
backgroundColor: '#00FF00',
},
button: {
flex: 0.15,
borderWidth: 1,
borderColor: 'rgba(0,0,0,0.25)',
alignItems: 'center',
justifyContent: 'center',
alignSelf: 'center',
borderWidth: 2,
borderRadius: 10,
marginTop: 20,
width: 200,
height: 100,
// backgroundColor: '#E84C3D'
},
buttonText: {
fontWeight: 'bold',
fontSize: 20,
},
});
当我按下按钮时,颜色会按预期变化。 但是有没有办法根据数据库中存在的值来改变颜色?
例如,在这种情况下,如果“firebase”中位置“l1/”(在我的示例中)的值设置为true
,同样,如果 'l1/' 的值为false
,我希望颜色保持为 'red' 。
这可以实施吗?
如果是,那么收到的任何帮助对我都非常有帮助。
谢谢你。
PS 另外,请注意我对 React-Native 领域非常陌生(对不起)。
对于state
reRender
当它再次更改您的屏幕render
时。 看来你用过。 但你可以尝试另一种方式。 在第一次调用时,像这样在componentDidMount
中获取您的数据:
componentDidMount() {
console.log("componentDidMount");
this.setState({ l1: this.readVals('l1/') });
}
如果 l1 改变了,它应该适合你。
As you are working on class base component you can call an firebase function in a componentWillMount and get the color and save it to your state.
componentWillMount在渲染之前运行,所以一旦你得到数据,你可以 setState 然后通过 state 你可以改变按钮的颜色。
尝试这个
import {StatusBar} from 'expo-status-bar';
import React, {Component} from 'react';
import {StyleSheet, Text, View, Pressable, TouchableOpacity} from 'react-native';
import {initializeApp} from 'firebase/app';
import {getDatabase, ref, onValue, set} from 'firebase/database';
import {color} from 'react-native-reanimated';
const firebaseConfig = {};
initializeApp(firebaseConfig);
export default class App extends Component {
constructor() {
super();
this.state = {
l1: this.readVals('l1/'),
};
}
componentWillMount() {
const value = this.readVals('l1/');
this.setState({l1: value});
}
readVals(path) {
const db = getDatabase();
const reference = ref(db, path);
onValue(reference, (snapshot) => {
const value = snapshot.val().obj;
return value;
});
}
render() {
return (
<View style={styles.container}>
<Pressable
style={({pressed}) => [
{
backgroundColor: this.state.l1 ? '#FF0000' : '#00FF00',
},
styles.button,
]}>
<Text style={styles.buttonText}>Button</Text>
</Pressable>
<StatusBar style="auto" />
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#FF0000',
alignItems: 'center',
justifyContent: 'center',
},
getButton: {
borderWidth: 1,
borderColor: 'rgba(0,0,0,0.5)',
alignItems: 'center',
justifyContent: 'center',
alignSelf: 'center',
borderWidth: 2,
borderRadius: 7,
marginTop: 20,
width: 100,
height: 50,
backgroundColor: '#00FF00',
},
button: {
flex: 0.15,
borderWidth: 1,
borderColor: 'rgba(0,0,0,0.25)',
alignItems: 'center',
justifyContent: 'center',
alignSelf: 'center',
borderWidth: 2,
borderRadius: 10,
marginTop: 20,
width: 200,
height: 100,
// backgroundColor: '#E84C3D'
},
buttonText: {
fontWeight: 'bold',
fontSize: 20,
},
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.