react-native - How to Implement dark mode in React native Classes React navigation 5?

Question

Im trying to implement dark mode to my app. How to do that in classes in React navigation V5

Answer 1

https://stackoverflow.com/a/68005237/11711280为 reactjs 回答了这个问题

  constructor(props) {
    super(props);//seems to be the same here for reactjs as react-native
    this.darkModeQuery = window.matchMedia(`(prefers-color-scheme: dark)`);
    this.lightModeQuery = window.matchMedia(`(prefers-color-scheme: light)`);
  }
  componentDidMount() {
    this.darkModeListener = navigation.addListener(this.darkModeQuery, this.setDark);
    this.lightModeListener = navigation.addListener(this.lightModeQuery, this.setLight);
  }
  setDark = (darkModeQuery) =>
    this.setState({
      darkMode: darkModeQuery.length !== 0,
      darkModeListener: darkModeQuery
    });
  setLight = (lightModeQuery) =>
    this.setState({
      lightMode: lightModeQuery.length !== 0,
      lightModeListener: lightModeQuery
    });
  componentWillUnmount() {
    const { lightModeListener, darkModeListener } = this.state;
    if (lightModeListener)
      this.lightModeListener.remove();
    if (darkModeListener)
      this.darkModeListener.remove();
  }

https://stackoverflow.com/a/55590338/11711280我发现询问如何window.addEventListener(this.mediaQuery,this.myFunc)翻译this.darkModeListener = navigator.addEventListener(this.mediaQuery,this.myFunc)