Блог

Это код, который я написал, чтобы описать свою проблему,

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

function HookProblem() {
  const [darkMode, setDarkMode] = useState(false);

  return (
    <View style={{ backgroundColor: darkMode ? "black" : "gray", flex: 1 }}>
      <Text style={{ color: darkMode ? "white" : "black" }}>
        {darkMode ? "That's Dark Mode" : "That's Light Mode"}
      </Text>
      <Button title="Dark Mode" onPress={() => setDarkMode(true)} />
      <Button title="Light Mode" onPress={() => setDarkMode(false)} />
    </View>
  );
}

const styles = StyleSheet.create({
  con: {
    backgroundColor: "yellow",
    flex: 1,
  },
});
export default HookProblem;
 

До сих пор проблем не было, и все работает очень хорошо, но проблема возникает, когда я хочу создать таблицу стилей вместо встроенного объекта style,

Здесь

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



function HookProblem() {
  const [darkMode, setDarkMode] = useState(false);

  return (
    <View style={styles.con}>
      <Text style={styles.text}>
        {darkMode ? "That's Dark Mode" : "That's Light Mode"}
      </Text>
      <Button title="Dark Mode" onPress={() => setDarkMode(true)} />
      <Button title="Light Mode" onPress={() => setDarkMode(false)} />
    </View>
  );
}

const styles = StyleSheet.create({
  con: {
    backgroundColor: darkMode ? "black" : "gray",
    flex: 1,
  },
  text: {
    color: darkMode ? "white" : "black",
  },
});
export default HookProblem;

 

Ошибка ссылки: darkMode не определен, я хочу решить эту проблему, если это возможно, я хочу сделать что-то вроде передачи логического значения darkMode вне тела функции. Возможно ли это?

Вы должны иметь возможность вызывать стили const в рендеринге и создавать пользовательскую функцию привязки, например:

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

function useStyles(darkMode) {
  return StyleSheet.create({
    con: {
      backgroundColor: darkMode ? "black" : "gray",
      flex: 1,
    },
    text: {
      color: darkMode ? "white" : "black",
    },
  });
}

function HookProblem() {
  const [darkMode, setDarkMode] = useState(false);
  const styles = useStyles(darkMode);

  return (
    <View style={styles.con}>
      <Text style={styles.text}>
        {darkMode ? "That's Dark Mode" : "That's Light Mode"}
      </Text>
      <Button title="Dark Mode" onPress={() => setDarkMode(true)} />
      <Button title="Light Mode" onPress={() => setDarkMode(false)} />
    </View>
  );
}

export default HookProblem;
 

Короткий ответ: невозможно определить переменную внутри функции и получить к ней доступ за пределами этой области.

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

Я не говорю, что это лучший способ сделать это, это просто то, что я видел в Интернете.