[英]How to create simple switch toggle to switch between dark theme and light theme in react native
I am creating a simple switch component that is if turned on the theme of the app will be light otherwise it would be dark.我正在创建一个简单的开关组件,如果打开该应用程序的主题,则它会变亮,否则会变暗。
Here is what i tried but it is not working.这是我尝试过的方法,但没有用。 How can i make the toggle switch the theme of the whole app?如何使切换开关成为整个应用程序的主题?
import { StatusBar } from 'expo-status-bar';
import React, {useState} from 'react';
import { StyleSheet, Text, View, Switch, Appearance } from 'react-native';
export default function App() {
const [isEnabled, setIsEnabled] = useState(false);
const toggleSwitch = () => setIsEnabled(previousState => !previousState);
const colorScheme = Appearance.getColorScheme();
if (colorScheme === 'dark') {
}
return (
<View style={styles.container}>
<StatusBar style="auto" />
<Switch
style={{marginBottom:500, marginLeft:150}}
trackColor={{ false: "light", true: "dark" }}
thumbColor={isEnabled ? colorScheme == 'light' : colorScheme == 'dark'}
ios_backgroundColor="#3e3e3e"
onValueChange={toggleSwitch}
value={isEnabled}
/>
</View>
);
} }
You can simply use useEffect here.您可以在这里简单地使用 useEffect 。
import { StatusBar } from 'expo-status-bar';
import React, {useState,useEffect} from 'react';
import { StyleSheet, Text, View, Switch, Appearance } from 'react-native';
export default function App() {
const [isEnabled, setIsEnabled] = useState(false);
const toggleSwitch = () => setIsEnabled(previousState => !previousState);
// add this
useEffect(()=>{
const colorScheme = Appearance.getColorScheme();
if (colorScheme === 'dark') {
setIsEnabled(true); // true means dark
}else{
setIsEnabled(false); // false means light
}
},[])
return (
<View style={styles.container}>
<StatusBar style="auto" />
<Switch
style={{marginBottom:500, marginLeft:150}}
trackColor={{ false: "light", true: "dark" }}
thumbColor={isEnabled ? colorScheme == 'light' : colorScheme == 'dark'}
ios_backgroundColor="#3e3e3e"
onValueChange={toggleSwitch}
value={isEnabled}
/>
</View>
);
}
Try usingreact-native-appearance-control
.尝试使用react-native-appearance-control
。 The Appearance API in react-native is read-only, but react-native-appearance-control
provides methods for changing the underlying Color Scheme value for your app. react-native 中的 Appearance API 是只读的,但react-native-appearance-control
提供了更改应用程序底层配色方案值的方法。
eg例如
import React, {useState, useEffect} from 'react';
import { Text, View, Switch, Appearance } from 'react-native';
import { setAppearanceLight, setAppearanceDark } from 'react-native-appearance-control';
export default function App() {
const [isEnabled, setIsEnabled] = useState(Appearance.getColorScheme() === 'dark');
const toggleSwitch = () => setIsEnabled(previousState => !previousState);
useEffect(()=>{
if (isEnabled) {
setAppearanceDark();
} else {
setAppearanceLight();
}
}, [isEnabled])
return (
<View>
...
<Switch
...
onValueChange={toggleSwitch}
value={isEnabled}
/>
</View>
);
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.