React Собственный переключатель изменений сохранения с Asyn c Storage - PullRequest
Новая
       18

React Собственный переключатель изменений сохранения с Asyn c Storage

0 голосов
/ 22 января 2020

Я новичок в React Native, у меня проблема с Switch, я хочу сохранить изменения, темный режим и Switch, когда я выключаю приложение и возвращаюсь, мои изменения должны быть сохранены. Когда я закрывал приложение, мой переключатель вернулся в первое положение, и темный режим не работает. Я знаю, что я делаю что-то не так, но я не сделал мобильное приложение, и это мой первый раз, и я не знаю, как использовать AsyncStorage в этом приложении для работы. Может кто-нибудь помочь мне решить эту проблему? 

import React, { createContext, useState, useEffect } from 'react';
import { AsyncStorage } from 'react-native';

export const DarkModeContext = createContext();

export default function DarkModeContextProvider(props) {
  const [switchMode, setSwitchMode] = useState(false);

  useEffect(() => {
    let switch1 = switchMode;
    AsyncStorage.setItem('switch1', JSON.stringify(switch1));
  });

  const SwitchThis = () => {
    setSwitchMode(!switchMode);
  };

  return (
    <DarkModeContext.Provider
      value={{
        switchMode,
        SwitchThis
      }}
    >
      {props.children}
    </DarkModeContext.Provider>
  );
}

и следующий компонент: 

import React, { useState, useContext } from 'react';
import { View, ScrollView, TouchableOpacity, Text, AsyncStorage } from 'react-native';
import { List } from 'react-native-paper';
import BackgroundImage from './BackgroundImage';
import Clock from './Clock';
import TabIcon from './TabIcon';
import AddButton from './AddButton';
import { DarkModeContext } from './app-context';

const HomeScreen = () => {
  const { switchMode } = useContext(DarkModeContext);

  displayData = async () => {
    try {
      let switch1 = await AsyncStorage.getItem('switch1', function (err, switch1) {
        JSON.parse(switch1)
      }
)
      return switch1
    }
    catch (error) {
      return error
    }
  }

  return (
    <View
      style={{
        flex: 1,
        backgroundColor: !switchMode ? 'white' : '#353535'
      }}
    >
      <BackgroundImage fabButton={<AddButton/>}>
        <Clock />
      </BackgroundImage>
      <ScrollView>
        <List.Section>
          <List.Subheader style={{ color: !switchMode ? 'black' : 'white' }}>
            Task List
          </List.Subheader>
          <TouchableOpacity onPress={displayData}>
            <Text>Click displayData</Text>
          </TouchableOpacity> 
        </List.Section>
      </ScrollView>
    </View>
  );
};

1 Ответ

0 голосов
/ 22 января 2020

Вы импортируете AsyncStorage из «act-native », который не рекомендуется использовать @react-native-community/react-native-async-storage

npm i @react-native-community/react-native-async-storage

И на домашнем экране вы не вызываете функцию displayData (), поэтому Как данные должны отображаться без вызова функции.

, и я предлагаю сделать отдельные функции для записи и чтения из асинхронного c хранилища, это поможет вам сократить ваш код и время.

Вот так: 

let  storeData=(name, obj)=> {

    return new Promise((resolve,reject)=>{

            let jsonOfItem = JSON.stringify(obj)
            AsyncStorage.setItem(name, jsonOfItem).then(r=>resolve(jsonOfItem))
            .catch(e=>reject(e))

    })

  }

let  readData=(name)=> {

    return new Promise((resolve,reject)=>{
            //we want to wait for the Promise returned by AsyncStorage.setItem()
            //to be resolved to the actual value before returning the value
            AsyncStorage.getItem(name).then(r=> resolve(JSON.parse(r)) )
            .catch(e=>reject(e))

    })

  }

//Now you can just read write easily in async function like this:

let fetchedData = await  readData("key")

//and for storing data.

storeData("key",object)
...