使用全局变量来存储暗模式和亮模式变量。在应用程序中，如果用户想要深色或浅色主题，我会在用户切换时更改变量的位置，但是一旦我更改了这个新变量，我无法弄清楚如何让样式刷新。我知道这可能不是最好的方法，但有人可以帮我吗？
/* Universal styling page, all styling on pages is located here
Styling is adjusted by window and screen dimensions so that
styling will look nice on multiple devices of varying sizes
*/
import { StyleSheet, Dimensions, Appearance} from 'react-native';;
const window = Dimensions.get("window");
const screen = Dimensions.get("screen");
//const colorScheme = 'dark'
let pref = Appearance.getColorScheme();
global.COLORSCHEME = [pref];
const darkTheme = "#1A1A1A"
const lightTheme = "#FAFAFA"
export default StyleSheet.create({
noPadContainer: {
flex: 1,
backgroundColor: COLORSCHEME[0]==="dark" ? darkTheme : lightTheme,
},
container: {
flex: 1,
padding: 24,
backgroundColor: COLORSCHEME[0]==="dark" ? darkTheme : lightTheme
},
TextInput: {
backgroundColor: COLORSCHEME[0]==="dark" ? "grey" : "#FAFAFA",
},
overlay: {
flex: 2,
position: 'absolute',
left: 0,
top: 0,
opacity: COLORSCHEME[0]==="dark" ? 0.7 : 1.0,
backgroundColor: COLORSCHEME[0]==="dark" ? 'black' : 'transparent',
width: window.width,
height: window.height,
alignItems:"center",
marginHorizontal: 0,
},
generalOverlay: {
flex: 1,
position: 'absolute',
left: 0,
top: 0,
opacity: COLORSCHEME[0]==="dark" ? 0.7 : 1.0,
backgroundColor: COLORSCHEME[0]==="dark" ? 'black' : 'transparent',
width: window.width,
height: window.height,
marginHorizontal: 0,
},
generalButtonContained: {
//backgroundColor: "#6200ed"
backgroundColor: COLORSCHEME[0]==="dark" ? '#332940' : '#6200ed',
color: COLORSCHEME[0]==="dark" ? '#696969' : '#FAFAFA',
},
generalButton: {
color: COLORSCHEME[0]==="dark" ? '#696969' : '#FAFAFA',
},
generalText: {
color: COLORSCHEME[0]==="dark" ? '#696969' : 'black',
},
scrollview: {
flex: 2,
alignItems:"center",
marginHorizontal: 0,
//paddingBottom: bottomNavigatorBarHeight
},
centerPage: {
justifyContent: "center",
alignItems:"center"
},
centerPageMargin: {
justifyContent: "center",
alignItems:"center",
marginTop: 40,
},
tinyLogo:{
width: screen.width*.6,
height: screen.height*.25,
marginTop: 10,
alignItems: "center",
marginTop: "25%",
},
cardStyleWelcome: {
backgroundColor: "grey",
},
buttonStyle: {
width: "100%",
height: "100%",
minWidth: screen.width*.4,
minHeight: screen.height*.18,
maxWidth: screen.width*.45,
maxHeight: screen.height*.25,
textAlign: "center",
backgroundColor: COLORSCHEME[0]==="dark" ? '#332940' : '#6200ed',
//backgroundColor: "#7F46C7",
borderRadius: 20,
borderWidth: 1,
borderColor: COLORSCHEME[0]==="dark" ? '#696969' : 'white',
elevation: 10,
justifyContent: "center",
},
textStyle: {
//color: "#6200ed",
color: COLORSCHEME[0]==="dark" ? '#a1a1a1' : 'white',
justifyContent: "center",
alignItems:"center",
textAlign: "center",
fontWeight: '500',
fontSize: 14,
fontFamily: "System",
textTransform: "uppercase",
letterSpacing: 1,
marginVertical: 9,
marginHorizontal: 16,
},
modalText: {
color: "white",
justifyContent: "flex-start",
alignItems:"flex-start",
textAlign: "center",
fontWeight: '500',
fontSize: 12,
fontFamily: "System",
textTransform: "uppercase",
marginHorizontal: 10,
},
modalStyle: {
shadowOpacity: 0.25,
shadowRadius: 4,
elevation: 5,
margin: 0,
alignItems:"center",
textAlign: "center",
backgroundColor: 'rgba(52, 52, 52, 0.25)',
},
viewStyle: {
flex:-1,
flexDirection:"row",
marginTop: 10,
},
cardStyle: {
backgroundColor: "powderblue",
margin: 10,
},
label: {
color: "black",
},
title: {
margin: 8,
color: "#20232a",
textAlign: "center",
fontSize: 20,
fontWeight: "600",
flexWrap: "wrap",
},
buttonStyleT:{
backgroundColor :"silver"
},
scheduleHeight: {
height: screen.height * .82
}
});;
我认为您可以为此目的使用反应上下文并构建一个完全响应的用户优先解决方案，如下所示：
import React, {FC} from 'react';
import {Appearance, StyleSheet, View} from 'react-native';
import AsyncStorage from '@react-native-async-storage/async-storage';
// dark theme
const darkStyles = StyleSheet.create({
noPadContainer: {
flex: 1,
backgroundColor: '#000',
},
});
// light theme
const lightStyles = StyleSheet.create({
noPadContainer: {
flex: 1,
backgroundColor: '#fff',
},
});
// styles context
export const ThemeContext = React.createContext({
theme: lightStyles,
toggle: () => {},
});
export const useTheme = () => React.useContext(ThemeContext);
export const ThemeProvider = ({children}) => {
const [userTheme, setUserTheme] = React.useState();
const [theme, setTheme] = React.useState(Appearance.getColorScheme() || 'light');
const contextValue = React.useMemo(
() => ((userTheme || theme) === 'dark' ? darkStyles : lightStyles),
[userTheme, theme],
);
const toggleTheme = React.useCallback(async () => {
const newTheme = (userTheme || theme) === 'light' ? 'dark' : 'light';
setUserTheme(newTheme);
await AsyncStorage.setItem('theme', newTheme);
}, [theme, userTheme]);
const restoreTheme = React.useCallback(async () => {
const _userTheme = await AsyncStorage.getItem('theme');
if (_userTheme) {
setUserTheme(_userTheme);
}
}, []);
React.useEffect(() => {
restoreTheme();
}, [restoreTheme]);
// listen for changes in user preference
React.useEffect(() => {
if (!userTheme) {
const subscription = Appearance.addChangeListener(({colorScheme}) => {
if (colorScheme) {
setTheme(colorScheme);
}
});
return () => {
subscription.remove();
};
}
}, [userTheme]);
// render the theme
return (
<ThemeContext.Provider value={{theme: contextValue, toggle: toggleTheme}}>
{children}
</ThemeContext.Provider>
);
};
// use it in a component
const MyComponent: FC = () => {
const {theme} = useTheme();
return <View style={theme.noPadContainer} />;
};
const App = () => {
return (
<ThemeProvider>
<MyComponent />
</ThemeProvider>
);
};
export default App;
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句