作者热门文章
- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我正在尝试直接从样式访问 useTheme()但到目前为止,我的解决方案似乎不起作用。我不会出错。有没有办法做我想做的事情?
import { StyleSheet } from "react-native";
import { useTheme } from '@react-navigation/native'
export default function () {
const { colors } = useTheme();
const styles = GlobalStyles({ colors: colors })
return styles
}
const GlobalStyles = (props) => StyleSheet.create({
container: {
flex: 1,
backgroundColor: props.colors.backgroundColor,
},
})
访问组件中的样式
import React from "react";
import GlobalStyles from "../globalStyles.js"
class Inventory extends React.Component {
render() {
return (
<View style={globalStyles.container}>
)
}
最佳答案
您有几个问题:您只能在 Hook 或函数组件中使用 Hook 。所以你可以将你的全局样式表转换成一个钩子(Hook):
import { StyleSheet } from "react-native";
import { useTheme } from '@react-navigation/native'
const getGlobalStyles = (props) => StyleSheet.create({
container: {
flex: 1,
backgroundColor: props.colors.backgroundColor,
},
});
function useGlobalStyles() {
const { colors } = useTheme();
// We only want to recompute the stylesheet on changes in color.
const styles = React.useMemo(() => getGlobalStyles({ colors }), [colors]);
return styles;
}
export default useGlobalStyles;
然后,您可以通过将 Inventory
类组件转换为函数组件并使用新的 useGlobalStyles
Hook 来使用该 Hook 。
import React from "react";
import useGlobalStyles from "../globalStyles.js"
const Inventory = () => {
const globalStyles = useGlobalStyles();
return (
<View style={globalStyles.container}>
)
}
关于javascript - react native 导航 useTheme(),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/65258142/
我正在尝试直接从样式访问 useTheme()但到目前为止,我的解决方案似乎不起作用。我不会出错。有没有办法做我想做的事情? import { StyleSheet } from "react-na
我想在组件内的样式表创建函数中使用来自我的 native 纸张主题的颜色。这是我的代码 import { StyleSheet, Text, View } from 'react-native'; i
如果 React Hook useTheme() 是遗留的,那么如何访问 JSX 和 CSS 之外的主题 Prop 而不是使用 sx Prop ? 例如,我在一个组件中有一个更复杂的逻辑,需要在某些处
我是一名优秀的程序员,十分优秀!