реакция-родной-внешний вид не прослушивает событие изменения в первый раз - PullRequest
Новая
       152

реакция-родной-внешний вид не прослушивает событие изменения в первый раз

0 голосов
/ 04 августа 2020

Я пытаюсь выполнить настройку, поэтому, когда я изменяю свою Системную тему, моя собственная тема реагирования также должна измениться. Я использую реагирующую навигацию и реагирую на родной внешний вид. При запуске приложения применяется правильная системная тема, но когда я меняю тему при первом использовании приложения, этого не происходит. Но когда я пытаюсь изменить системную тему во второй раз, она также меняет тему приложения и работает правильно.

вот мой код: -

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

And 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',
    },
  });

Пожалуйста, помогите мне, чтобы эта тема изменилась в первый раз также, когда я меняю системную тему в первый раз после запуска приложения.

Ответы [ 2 ]

0 голосов
/ 10 августа 2020

изменить MainActivity. java

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

// copy these lines
@Override
public void onConfigurationChanged(Configuration newConfig) {
  super.onConfigurationChanged(newConfig);
  getReactInstanceManager().onConfigurationChanged(this, newConfig);
}
0 голосов
/ 05 августа 2020

Согласно docs Appearence.addChangeListener предоставляется с функцией обратного вызова, которая имеет colorScheme. Вы можете использовать это для обновления состояния напрямую, не нужно снова вызывать функцию onThemeChange (). 

useEffect(()=>{
    onThemeChange();

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

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