有没有办法将 useState 挂钩值传递到函数的主体之外？

Question

这是我为描述我的问题而编写的代码，

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;

直到现在都没有问题，一切都很好，但是当我想制作 styleSheet 而不是样式内联对象时出现问题，

这里

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;

ReferenceError: darkMode is not defined，我想尽可能解决这个问题，我想做一些事情，比如在函数体之外传递 darkMode 布尔值。这可能吗？

Answer 1

简而言之，不可能在函数内定义变量并在该范围外访问它。

您应该研究如何为 React 应用程序创建主题。我承认，我没有亲自做过，但我的理解是主题通常被定义为整个应用程序的上下文。

我并不是说这是最好的方法，这只是我在网上看到的。

Answer 2

您应该能够在渲染中调用常量样式并创建自定义挂钩函数，如下所示：

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;

有没有办法将 useState 挂钩值传递到函数的主体之外？

Is There a way for pass the useState hook value out side body of the function?

javascript

reactjs

react-native

react-hooks

use-state