Как избежать многократного вызова хуков для темы и адаптивных стилей в нативных компонентах React? ⇐ Javascript

[Anonymous]

Чего я хочу достичь: Эффективный встроенный менеджер тем/сменщик тем.
Стили должны использоваться следующим образом: где стили берутся из файлаstyles.ts, в котором я определяю свой стиль. Там у меня должен быть доступ к цвету темы (например: «Темный/Светлый») и динамическим размерам (ширина, высота), а это означает, что если я переключусь на альбомную ориентацию и обратно, стиль обновится соответствующим образом.
На данный момент у меня есть эта реализация. Однако в каждом компоненте мне приходится вызывать этот хук с моим конкретным стилем const Styles = useStyles();. Я хотел бы избежать этого (или скрыть это) и просто импортировать их перед использованием, чтобы мне не приходилось вызывать такой крючок для каждого импортируемого стиля в каждом компоненте.
App.tsx
import { NavigationContainer, DefaultTheme } from '@react-navigation/native';
import { createStackNavigator, StackScreenProps } from '@react-navigation/stack';
import { Button, View, Text, TouchableOpacity } from 'react-native';
import { useThemeStore, colors } from './themeStore';
import { useStyles } from './styles';

type RootStackParamList = {
Home: undefined;
Settings: undefined;
};

const Stack = createStackNavigator();

function HomeScreen({ navigation }: StackScreenProps) {
const styles = useStyles();
const toggleTheme = useThemeStore(state => state.toggleTheme);

return (


Home Screen
Current theme settings




navigation.navigate('Settings')}
>
Go to Settings



);
}

function SettingsScreen({ navigation }: StackScreenProps) {
const styles = useStyles();
const theme = useThemeStore(state => state.theme);

return (


Settings Screen
Current Theme: {theme.toUpperCase()}

navigation.goBack()}
>
Go Back



);
}

export default function App() {
const theme = useThemeStore(state => state.theme);

const navigationTheme = {
...DefaultTheme,
dark: theme === 'dark',
colors: {
...DefaultTheme.colors,
...colors[theme],
},
};

return (






);
}

themeStore.ts
import { MMKVLoader } from 'react-native-mmkv-storage';
import {create} from 'zustand';
import { persist } from 'zustand/middleware';
import { storage } from './storage';

export const storage = new MMKVLoader()
.withInstanceID('themeStorage')
.initialize();

export const colors = {
light: {
primary: '#007AFF',
background: '#FFFFFF',
card: '#FFFFFF',
text: '#000000',
border: '#D3D3D3',
notification: '#FF3B30',
},
dark: {
primary: '#BB86FC',
background: '#121212',
card: '#1E1E1E',
text: '#FFFFFF',
border: '#383838',
notification: '#CF6679',
},
};

interface ThemeState {
theme: 'light' | 'dark';
toggleTheme: () => void;
}

export const useThemeStore = create()(
persist(
(set) => ({
theme: 'light',
toggleTheme: () => set((state) => ({
theme: state.theme === 'light' ? 'dark' : 'light'
})),
}),
{
name: 'theme-storage',
storage: {
getItem: async (name) => {
const value = storage.getString(name);
return value ? JSON.parse(value) : null;
},
setItem: async (name, value) => {
storage.setString(name, JSON.stringify(value));
},
removeItem: async (name) => {
storage.removeItem(name);
},
},
}
)
);

styles.ts
import { useThemeStore } from './themeStore';
import { useDimensionsStore } from './dimensionsStore';
import { StyleSheet } from 'react-native';
import { colors } from './themeStore';

export const useStyles = () => {
const theme = useThemeStore(state => state.theme);
const { width, height } = useDimensionsStore();
const themeColors = colors[theme];

return StyleSheet.create({
screen: {
flex: 1,
backgroundColor: themeColors.background,
width,
height,
},
container: {
padding: 16,
backgroundColor: themeColors.card,
borderRadius: 8,
margin: 8,
},
text: {
color: themeColors.text,
fontSize: 16,
},
header: {
color: themeColors.primary,
fontSize: 24,
fontWeight: 'bold',
},
button: {
backgroundColor: themeColors.primary,
padding: 12,
borderRadius: 8,
alignItems: 'center',
},
buttonText: {
color: themeColors.background,
fontWeight: 'bold',
},
});
};


Подробнее здесь: https://stackoverflow.com/questions/793 ... in-react-n