react-native-appearance 第一次不听更改事件答案

【问题标题】：react-native-appearance not listening to change event for First Timereact-native-appearance 第一次不听更改事件
【发布时间】：2020-11-24 08:34:25
【问题描述】：

我正在尝试设置，因此当我更改我的系统主题时，我的反应本机应用程序主题也应该更改。我使用了反应导航和反应原生外观。在应用程序启动时应用了正确的系统主题，但是当我在第一次使用应用程序时更改主题时它没有。但是当我第二次尝试更改系统主题时，它也会更改应用程序主题并正常工作。

这是我的代码：-

App.js

import React from 'react';
import {} from 'react-native';
import {AppearanceProvider} from 'react-native-appearance';
import Main from './main';

export default function App() {
  
  return (
    <AppearanceProvider>
        <Main/>
    </AppearanceProvider>
  );
}

Main.js

import React, { useState,useEffect } from 'react';
import {} from 'react-native';
import {Appearance} from 'react-native-appearance';
import {DarkTheme,DefaultTheme,NavigationContainer} from '@react-navigation/native';
import Home from './home';

const myDarkTheme={
    ...DarkTheme,
    colors:{
        ...DarkTheme.colors,    
        text:"#fff",
        statusBarColor:"#000"
    }
  };
  
  const myLightTheme={
    ...DefaultTheme,
    colors:{
        ...DefaultTheme.colors,
        text:"#000",
        statusBarColor:"rgb(242, 242, 242)"
    }
  };



export default function Main(){
    const [theme,setTheme]=useState();
    console.log(theme);
    
   const onThemeChange=()=>{
        const newColor=Appearance.getColorScheme();
        setTheme(newColor);
    }

    useEffect(()=>{
        onThemeChange()

        const subscription=Appearance.addChangeListener(()=>{
            onThemeChange()
        })

        return ()=>subscription.remove();
    },[])

    return(
        <NavigationContainer theme={theme === 'light' ? myLightTheme : myDarkTheme}>
            <Home/>
        </NavigationContainer>
    )
}

还有 Home.js

import React from 'react';
import { StyleSheet, Text, View,StatusBar } from 'react-native';
import {useTheme} from '@react-navigation/native';

export default function Home(){
    const {colors}=useTheme();
    return (
      <View style={{...styles.container,backgroundColor:colors.background}}>
        <Text style={{color:colors.text}}>Open up App.js to start working on your app!</Text>
        <StatusBar barStyle={colors.statusBarColor==='#000' ? 'light-content':'dark-content'} backgroundColor={colors.background}/>
      </View>
    );
}

const styles = StyleSheet.create({
    container: {
      flex: 1,
      alignItems: 'center',
      justifyContent: 'center',
    },
  });

请帮助我，以便当我在应用启动后第一次更改系统主题时，主题也会第一次更改。

【问题讨论】：

你找到解决办法了吗？

标签： javascript reactjs react-native react-redux react-navigation

【解决方案1】：

修改MainActivity.java

import android.content.res.Configuration; // <--- import

// copy these lines
@Override
public void onConfigurationChanged(Configuration newConfig) {
  super.onConfigurationChanged(newConfig);
  getReactInstanceManager().onConfigurationChanged(this, newConfig);
}

【讨论】：

它到底是做什么的？

【解决方案2】：

有一个未解决的问题，

https://github.com/facebook/react-native/issues/28823

如果您使用的是 react-native，那么您可以合并到有人为上述问题提供的分支中来修复它。但我正在使用 Expo。

【讨论】：

【解决方案3】：

根据docsAppearence.addChangeListener，提供了具有colorScheme的回调函数。您可以直接使用它来更新状态，无需再次调用 onThemeChange() 函数。

useEffect(()=>{
    onThemeChange();

    const subscription = Appearance.addChangeListener(({ colorScheme }) => {
        setTheme(colorScheme);
    })

    return () => subscription.remove();
},[])

【讨论】：

我已经尝试过了，但仍然遇到问题感谢您的回复。

【解决方案4】：

值得一提的是，如果您使用的是 基于 chrome 的调试器，主题 always 将轻。禁用调试或切换调试器。

https://github.com/facebook/react-native/issues/28823#issuecomment-640671784

我遇到了同样的问题，钩子只返回“光”，不不管我在模拟器中切换多少外观。

经过大量挖掘代码，原来是它的原因这样做是由于 - 调试器！如果您使用的是基于 Chrome 的调试器（在浏览器中或使用独立的 RN 调试器）外观模块会一直返回光，由于调试器没有能够处理异步函数（或类似的东西，这是一个几天前！）。

我不能说我理解它为什么这样做的特质，但这一切的结果是我停止使用 Chrome 调试器并且移到脚蹼 - 它奏效了！我现在可以在黑暗之间切换和按预期使用 useColorTheme 挂钩的灯光模式。

希望这对其他人有所帮助，这让我很头疼一会儿！

【讨论】：