React native - реализация темного режима и перезапись системных настроек с помощью Asyncstorage - PullRequest
Новая
       57

React native - реализация темного режима и перезапись системных настроек с помощью Asyncstorage

0 голосов
/ 26 апреля 2020

Я реализую темный режим в реагировать на натив, где у меня есть файл с именем «Цвета. js» Я использую стиль реакции-родной-тематический в сочетании с реакцией-родной-внешний вид для реализации различных режимов.

Вот фрагмент моего кода:

Цвета. js: 

import AsyncStorage from "@react-native-community/async-storage"
import { registerThemes } from "react-native-themed-styles"
import { Appearance, useColorScheme } from "react-native-appearance"
const light = { backgroundColor: "white", textColor: "red" }
const dark = { backgroundColor: "black", textColor: "blue" }

const styleSheetFactory = registerThemes(
  { light, dark },
  () => {
      var colorScheme;
    // colorScheme = await AsyncStorage.getItem("mode");
    if(!colorScheme)
        colorScheme = Appearance.getColorScheme()c
    return ["light", "dark"].includes(colorScheme) ? colorScheme : "light"
  }
)

export { styleSheetFactory }

В любом компоненте: 

import { styleSheetFactory } from "../../../config/colors"
import { useTheme } from "react-native-themed-styles"

const themedStyles = styleSheetFactory(theme => ({

  cardViewTitle: {
    position: "relative",
    fontWeight: "bold",
    color: theme.textColor,
    marginTop: 16,
    fontSize: 18,
    marginLeft: 18,
    // textAlign: ""
  },
..
}));




render() {
  const [styles] = useTheme(themedStyles)

  return(
   ...
     <View style={{ height: "50%" }}>
       <Text numberOfLines={3} style={styles.cardViewTitle}>{item.name}</Text>
     </View>
   ...
})

Это работает довольно хорошо, когда я изменяю свой системный режим на «темный», текст отображается синим цветом, в противном случае - красным.

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

Я думал, что смогу использовать AsyncStorage, чтобы перезаписать его. Что-то вроде закомментированного «AsyncStorage.getItem (« mode »)» в Colors. js.

К сожалению, это не работает, потому что registerThemes должен быть синхронным. У вас есть идея, как я могу реализовать это поведение и позволить его перезаписать настройками? Есть ли (синхронная) альтернатива AsyncStorage?

...