如何基于Firebase值设置Pressable按钮颜色并点击同步更新两端状态

完全可以实现初始颜色预设的效果，你遇到的问题是异步取值逻辑错误和state使用不规范导致的，具体修改如下：

核心问题说明 #

• Firebase 的 onValue 是异步监听API，回调内的返回值无法被外层方法直接获取，constructor中同步赋值拿不到远程存储的值
• 代码存在state字段命名冲突、直接修改state的不符合规范的操作，导致视图无法正常更新

完整修改后代码 #

import {StatusBar} from 'expo-status-bar';
import React, {Component} from 'react';
import {StyleSheet, Text, View, Pressable, ActivityIndicator} from 'react-native';

import {initializeApp} from 'firebase/app';
import {getDatabase, ref, onValue, set, off} from 'firebase/database';

const firebaseConfig = {}; // 替换为你自己的firebase配置
initializeApp(firebaseConfig);

export default class App extends Component {
  constructor() {
    super();
    this.state = {
      isGreen: null, // 初始为null，可用于展示加载态
      dbRef: null // 存储数据库引用，方便后续取消监听
    };
  }

  componentDidMount() {
    const db = getDatabase();
    const reference = ref(db, 'value/');
    this.setState({dbRef: reference});
    // 监听远程值变化，拿到值后更新state，自动触发视图重绘
    onValue(reference, (snapshot) => {
      const remoteVal = snapshot.val().obj;
      this.setState({isGreen: remoteVal});
    });
  }

  componentWillUnmount() {
    // 组件卸载时取消监听，避免内存泄漏
    if (this.state.dbRef) {
      off(this.state.dbRef);
    }
  }

  toggleVal() {
    const newVal = !this.state.isGreen;
    // 先更新Firebase远程值，onValue监听到变化后会自动更新本地state
    set(this.state.dbRef, {
      obj: newVal
    });
  }

  render() {
    // 加载中展示加载指示器，避免闪屏
    if (this.state.isGreen === null) {
      return <View style={styles.container}><ActivityIndicator size="large" /></View>
    }
    return (
      <View style={styles.container}>
        <Pressable
          style={({pressed}) => [
            {
              // 按需求：true显示绿色，false显示蓝色
              backgroundColor: this.state.isGreen ? '#00FF00' : '#0000FF',
              opacity: pressed ? 0.8 : 1
            },
            styles.button,
          ]} 
          onPress={() => {this.toggleVal()}}
        >
          <Text style={styles.buttonText}>Button</Text>
        </Pressable>

        <StatusBar style="auto" />
      </View>
    );
  }
}

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

  button: {
    borderWidth: 1,
    borderColor: 'rgba(0,0,0,0.25)',
    alignItems: 'center',
    justifyContent: 'center',
    alignSelf: 'center',
    borderRadius: 10,
    marginTop: 20,
    width: 200,
    height: 100,
  },
  buttonText: {
    fontWeight: 'bold',
    fontSize: 20,
    color: '#fff'
  },
});

修改说明 #

• 把远程值监听逻辑放到componentDidMount生命周期中执行，拿到远程值后通过setState更新state，自动触发组件重绘，即可正确设置初始颜色
• 统一state字段，避免命名冲突，新增加载态避免初始渲染时的颜色闪屏问题
• 点击按钮时直接修改Firebase值，onValue监听到变化后会自动同步本地state和视图，保证本地和远程数据完全一致
• 新增组件卸载时的监听取消逻辑，避免内存泄漏

内容的提问来源于stack exchange，提问作者bruhboi123345123