React native navigation useTheme()

ttp71kqs 于 2023-11-21 发布在 React

关注(0)|答案(1)|浏览(195)

我尝试直接从样式访问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}>
            )
    
     }

型

react-native

来源：https://stackoverflow.com/questions/65258142/react-native-navigation-usetheme

1条答案

按热度按时间

ar7v8xwq1#

你有几个问题：你只能在钩子或函数组件中使用钩子。所以你可以将全局样式表转换为钩子：

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钩子来使用该钩子。

import React from "react";
import useGlobalStyles from "../globalStyles.js"
    
const Inventory = () => {
  const globalStyles = useGlobalStyles();

  return (
    <View style={globalStyles.container}>
  )
}

型

赞(0）回复(0）举报 2023-11-21

我来回答

React native navigation useTheme()

1条答案

相关问题

热门标签

最新问答