有没有办法将 useState 挂钩值传递到函数的侧体？答案

【问题标题】：Is There a way for pass the useState hook value out side body of the function?有没有办法将 useState 挂钩值传递到函数的侧体？
【发布时间】：2021-05-15 07:40:09
【问题描述】：

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

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 布尔值。这可能吗？

【问题讨论】：

标签： javascript reactjs react-native react-hooks use-state

【解决方案1】：

您应该能够在渲染中调用 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;

【讨论】：

【解决方案2】：

简短的回答，不可能在函数内部定义变量并在该范围之外访问它。

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

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

【讨论】：

我知道有更好的方法来做一个黑暗的主题，例如 useTheme form react-navigation。但我尽量善于处理状态，谢谢^_^