Bearbeiten

Verwendung von PlatformColor und Reaktion auf Themes

Architekturbewertung erforderlich: Diese Dokumentation wurde zur Unterstützung der Entwicklung gegen die "alte" oder "Legacy"-Architektur von React Native geschrieben. Sie ist möglicherweise nicht direkt auf die Entwicklung mit der neuen Architektur anwendbar und muss überprüft und möglicherweise aktualisiert werden. Informationen zu React Native-Architekturen in React Native Windows finden Sie unter Neu vs. Alt Architektur.

Übersicht

Windows unterstützt zwei einzigartige native Stil-/Themen-Verhaltensweisen: zum einen die Änderungen des dunklen und hellen Themas und zum anderen adaptive Pinsel und Systemfarben. Dieser Artikel zeigt Ihnen, wie Sie Ihre App so einrichten, dass sie auf Themenänderungen reagiert und die Windows-Pinsel verwendet, wenn und wo Sie möchten.

Einrichtung und Behandlung von Ereignissen bei Themenänderungen

In diesem Beispiel betrachten wir drei Dinge

• Wie Sie Ihre React Native-App so einrichten, dass sie stil- und ereignissensibel für Systemthemen ist
• Wie Sie Stile wechseln, wenn eine Themenänderung aufgetreten ist
• Behandlung eines Ereignisses bei Themenänderung

Verwendung von Hooks zur Sensibilisierung für Themenänderungen

Importieren Sie zuerst den Hook useColorScheme in Ihre React Native-App.

import { useColorScheme } from 'react-native'

 const MyAppComponent = () => {
        const colorScheme = useColorScheme();
        return (
          <Button title='click me' color={colorScheme === 'dark' ? 'grey' : 'orange'}/>
        );
      };

Hinweis: useColorScheme() gibt beim Remote-Debugging immer 'light' zurück.

Einrichtung Ihrer App zur Sensibilisierung für Themenänderungen ohne Hooks

Importieren Sie zuerst die API Appearance in Ihre React Native-App.

import { Appearance } from 'react-native'

Erstellen Sie eine lokale Variable, die in einer Stil-Bedingung verwendet oder anderweitig referenziert werden kann, und stellen Sie dann Mount-Funktionen bereit, um sicherzustellen, dass Sie die Ereignisse bei Themenänderungen korrekt abhören.

class MyAppClass extends Component {
  state = {
    currentTheme: Appearance.getColorScheme()
  };

  componentDidMount() {
    Appearance.addChangeListener(this.onAppThemeChanged);
  };

  componentWillUnmount() {
    Appearance.addChangeListener(this.onAppThemeChanged);
  };

  onAppThemeChanged = (theme) => {
    const currentTheme = theme;
    this.setState({currentTheme});
  };

  render() {
    <Button title='click me' color={this.state.currentTheme === 'dark' ? 'grey' : 'orange'}/>
  }
}

Hinweis: getColorScheme() gibt beim Remote-Debugging immer 'light' zurück.

Verwendung von Windows-definierten Themenpinseln

Die folgenden Beispiele zeigen, wie auf Windows-System-Themenpinsel zugegriffen und diese verwendet werden können, um sie in Ihren Stilen anzuwenden. Weitere Informationen zu Windows XAML-Themenressourcen finden Sie unter: https://docs.microsoft.com/en-us/windows/uwp/design/controls-and-patterns/xaml-theme-resources

Jeder Pinsel-/Farbwert in Ihrem nativen ResourceDictionary der App, sei es vom System oder benutzerdefinierte native Ressourcen, ist über PlatformColor verfügbar.

Verwendung von Themenpinseln in einem Stil

const styles = StyleSheet.create({
  title: {
    fontSize: 19,
    fontWeight: 'bold',
    color: PlatformColor('SystemControlPageTextBaseHighBrush')
  },
});

Anwenden einer System-Akzentfarbvariante

In Windows gibt es algorithmisch generierte Akzentfarben – genannt Light oder Dark 1, 2 und 3. Dieses Beispiel zeigt, wie dies mit dem Objekt windowsbrush angewendet werden kann.

const styles = StyleSheet.create({
  title: {
    fontSize: 19,
    fontWeight: 'bold',
    color: PlatformColor('SystemAccentColorLight3')
  },
});

Hinweis: Die System-Akzentfarben sind Color-Objekte auf der nativen Ebene, während die anderen Beispiele die Verwendung von Themenpinseln zeigten, die SolidColorBrush-Objekte sind. Das bedeutet, dass sich die SolidColorBrushes automatisch basierend auf dem Thema (Hell, Dunkel oder Hoher Kontrast) anpassen, während die Colors statisch bleiben.

Verwendung von PlatformColor zum Zugriff auf Reveal und Acrylic

Die API PlatformColor bietet Zugriff auf Reveal und Acrylic über JavaScript auf Windows-Geräten, die diese Funktionen unterstützen.

Verwendung von System Acrylic

Die API PlatformColor gibt Ihnen Zugriff auf alle System-Acrylic-Pinsel, auf die über den Ressourcennamen zugegriffen werden kann. Geben Sie einfach den Ressourcennamen-String im Stil der Komponente an, und er wird entsprechend angewendet.

const styles = StyleSheet.create({
  viewcomponent: {
    backgroundColor: PlatformColor('SystemControlAcrylicWindowBrush')
  },
});

Anwenden von Reveal Highlight

Reveal kann auf Oberflächen genau auf die gleiche Weise angewendet werden wie Acrylic und andere Systempinsel.

const styles = StyleSheet.create({
  viewcomponent: {
    backgroundColor: PlatformColor('SystemControlBackgroundAccentRevealBorderBrush')
  },
});