Блог

Итак, я буквально новичок в React-Native, и я только начал экспериментировать. Итак, я столкнулся с проблемой выбора цвета кнопки «зеленый» или «красный» в зависимости от логического значения, присутствующего в базе данных.

Итак, на данный момент я использую «Firebase» от Google в качестве основной базы данных.
Это базовый код, который я пытаюсь разработать.

 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,
  },
});

 

Когда я нажимаю кнопку, цвет меняется, как и ожидалось. Но есть ли способ изменить цвет на основе значения, присутствующего в базе данных?

Например, в этом случае я хочу, чтобы кнопка имела цвет «зеленый» с момента загрузки приложения, если значение в местоположении «l1 /» (в моем примере) в «firebase» имеет значение, равное true , и аналогично, я хочу, чтобы цвет оставался’красный’, если значение в ‘l1 /’ равно false .

Можно ли это реализовать?
Если да, любая полученная помощь мне очень полезна.
Спасибо.

PS Также, пожалуйста, обратите внимание на тот факт, что я очень новичок в области React-Native (извините).

для reRender экрана, который вы должны использовать state , и когда он снова изменит ваш экран render . и, похоже, вы это использовали. но вы можете попробовать другой подобный способ. при первом вызове, чтобы получить ваши данные следующим componentDidMount образом:

   componentDidMount() {
    console.log("componentDidMount");
     this.setState({  l1: this.readVals('l1/') });
  }

 

если l1 изменился, это должно сработать для вас.

с другой стороны, если вы хотите UI изменить сразу после изменения базы данных, вы можете попробовать 2 способа. сначала вы используете socket programming signalR компонент like . для получения дополнительной информации по этой ссылке

второй способ firebase , который вы можете использовать firebaseMessaging , и таким образом, при изменении базы данных данные json отправляются через notification . для получения дополнительной информации см. Это

Поскольку вы работаете над базовым компонентом класса, вы можете вызвать функцию firebase в componentWillMount и получить цвет и сохранить его в своем состоянии.

componentWillMount запускается перед рендерингом, поэтому, как только вы получите данные, вы можете установить состояние, а затем по этому состоянию вы можете изменить цвет кнопки.

ПОПРОБУЙТЕ ЭТО

 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,
  },
});