React Native Hooks - Как использовать useStates в стилях

Question

Я использую хуки для написания собственного приложения. У меня проблема с использованием состояний внутри стилей. Фон контейнера текста красный, по умолчанию и после нажатия кнопки «Подтверждение» должен быть изменен на зеленый. На данный момент я сталкиваюсь с ошибкой, когда я использую activeBtn в качестве backgroundColor в стиле. Пожалуйста, помогите мне правильно изменить код. Я упростил код, чтобы он был более понятным, как показано ниже:

import React, { useState } from "react";
import { StyleSheet, Text, View, TouchableOpacity } from "react-native";

const DifficultScreen = (props) => {
  const [activeBtn, setActiveBtn] = useState("red");
  const confirmHandler = () => {
    setActiveBtn("green");
  };
  return (
    <View>
      <View style={styles.container}>
        <Text style={styles.title}>Difficult screen is showing</Text>
      </View>
      <View>
        <TouchableOpacity onPress={confirmHandler} style={styles.btn}>
          <Text>Confirm</Text>
        </TouchableOpacity>
      </View>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    backgroundColor: activeBtn,
    alignItems: "center",
    justifyContent: "center",
    width: "100%",
    height: 90,
    padding: 35,
  },
  title: {
    color: "black",
    fontSize: 18,
  },
  btn: {
    color: "black",
    padding: "10%",
    backgroundColor: "white",
    borderRadius: "5px",
    alignSelf: "center",
    textAlign: "center",
    margin: "5%",
  },
});

export default DifficultScreen;

Answer 1

Что вы можете сделать, это использовать его в стиле контейнера следующим образом:

изменить это:

<View style={styles.container}>

на:

<View style={[styles.container, {backgroundColor: activeBtn}]}/>

Это способ добавить динамический c стиль для компонента

Answer 2

импорт React, {useState} из "реакции"; import {StyleSheet, Text, View, TouchableOpacity} из "act-native ";

const DifficultScreen = (props) => {
  const [activeBtn, setActiveBtn] = useState(styles.btnRed);
  const confirmHandler = () => {
    setActiveBtn(styles.btnGreen);
  };
  return (
    <View>
      <View style={styles.container}>
        <Text style={styles.title}>Difficult screen is showing</Text>
      </View>
      <View>
        <TouchableOpacity onPress={confirmHandler} style={activeBtn}>
          <Text>Confirm</Text>
        </TouchableOpacity>
      </View>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    backgroundColor: activeBtn,
    alignItems: "center",
    justifyContent: "center",
    width: "100%",
    height: 90,
    padding: 35,
  },
  title: {
    color: "black",
    fontSize: 18,
  },
  btnRed: {
    color: "black",
    padding: "10%",
    backgroundColor: "white",
    borderRadius: "5px",
    alignSelf: "center",
    textAlign: "center",
    margin: "5%",
  },
  btnGreen: {
    color: "green",
    padding: "10%",
    backgroundColor: "white",
    borderRadius: "5px",
    alignSelf: "center",
    textAlign: "center",
    margin: "5%",
  },
});

export default DifficultScreen;