reactjs 如何在react native中创建简单的切换开关以在深色主题和浅色主题之间切换

eh57zj3b  于 2023-01-12  发布在  React
关注(0)|答案(2)|浏览(240)

我正在创建一个简单的开关组件,如果打开应用程序的主题将是轻,否则它将是黑暗的。
下面是我尝试过但不起作用的方法。我如何才能让切换开关成为整个应用程序的主题?

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>
  );

}

3qpi33ja

3qpi33ja1#

您只需在此处使用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>
          );
        }
r8uurelv

r8uurelv2#

尝试使用react-native-appearance-control。react-native中的Appearance API是只读的,但react-native-appearance-control提供了用于更改应用基础配色方案值的方法。
例如:

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>
  );
}

相关问题