typescript - React Native / Styled Components - 主题

Question

希望你一切都好。

所以，我正在尝试使用样式组件在 RN 中创建一个主题切换器；

当我切换我的主题切换器时，什么也没有发生。

我创建了以下钩子：

从'react'导入反应，{ createContext，ReactNode，useContext，useState}

接口 IThemeProviderProps { 孩子：ReactNode }

接口 ThemeData { toggleTheme: () => void currentTheme: string }

const ThemeContext = createContext({} as ThemeData)

export const CustomThemeProvider = ({ children }: IThemeProviderProps) => { const [currentTheme, setWwitchTheme] = useState('light')

 const toggleTheme = () => {

      if (currentTheme ==='light'){
           setWwitchTheme('dark')
      }
      setWwitchTheme('dark')
      console.log({currentTheme})
 }

 return (
      <ThemeContext.Provider value={{ toggleTheme, currentTheme }}>
           {children}
      </ThemeContext.Provider>
 ) }

导出函数 useCustomTheme() { const context = useContext(ThemeContext)

 return context }

然后我像这样设置我的应用程序：

导入'react-native-gesture-handler' import { ThemeProvider } from 'styled-components/native' import { AppProvider } from './src/components/hooks' import { useCustomTheme } from './src/components/hooks/主题' import { Routes } from './src/routes' import { dark } from './src/styles/themeDark' import { light } from './src/styles/themeLight'

导出默认函数 App() { const { currentTheme } = useCustomTheme()

 return (
      <AppProvider>
           <ThemeProvider theme={ currentTheme === 'light' ? light : dark}>
                <Routes />
                
           </ThemeProvider>
      </AppProvider>
 ) }

贝娄遵循我的主题切换器代码：

导入 { DrawerContentScrollView } from '@react-navigation/drawer' import React from 'react' import { View, Text, Switch } from 'react-native'

从'../hooks/Theme'导入{useCustomTheme}；

从 './styles' 导入 { Container }

导出函数 DrawerContent({ ...props }) {

 const {currentTheme, toggleTheme} = useCustomTheme();

 function handleTheme () {

 }

 return (
      <Container>
           <DrawerContentScrollView>
                <View>
                     <Switch

                     value={!!currentTheme}
                     onValueChange={toggleTheme}

                     />
                     <Text>{currentTheme}</Text>
                </View>
           </DrawerContentScrollView>
      </Container>
 ) }

标签： typescriptreact-nativestyled-components