Блог

В моем App.js я хочу установить состояние логической переменной в значение true, когда элемент сохранения завершит загрузку. Я использую пользовательский компонент экрана-заставки, поэтому я хочу установить для состояния логической переменной значение true, когда <PersistGate> завершится загрузка, пожалуйста, как я могу это сделать

Сохранить- Index.js

     import { createStore } from "redux";
import { persistStore, persistReducer } from 'redux-persist'
import storage from 'redux-persist/lib/storage' 
import rootReducer from "../reducers/index";
import autoMergeLevel2 from 'redux-persist/lib/stateReconciler/autoMergeLevel2';
const persistConfig = {
    key: 'root',
    storage,
    stateReconciler: autoMergeLevel2
  }
const persistedReducer = persistReducer(persistConfig, rootReducer)
export default () => {
  let store = createStore(persistedReducer)
  let persistor = persistStore(store)
  return { store, persistor }
}
  

App.js

 import {
    Platform,
    StyleSheet,
    Text,
    Image,
    Dimensions,
    StatusBar,
    ScrollView,
    View,
    DeviceEventEmitter,
    FlatList,
    ActivityIndicator,
    AsyncStorage
} from 'react-native';
import Splash from './components/Splash';
import Home from './components/Home';
import MusicFiles from 'react-native-get-music-files';
import Permissions from 'react-native-permissions';
import { PersistGate } from 'redux-persist/integration/react';


export default class App extends Component{
 constructor(props) {
        super(props);
        this.state = {
            timePassed: false,
            photoPermission: '',
            songs: [], 
            loaded: true,
            loading: false
        };
    }
  render() {
    if (!this.state.loaded) {
        return (
            <Splash/>
           );
    } else {
        return (
            <View style={styles.linearGradient}>
            <Provider store={store}>
            <PersistGate loading={null} persistor={persistor}>
            <Home songs={this.state.songs}/>
            </PersistGate>
            </Provider>
            </View>
        );

    }
}
}
  

Вы можете поместить свой компонент splash в loading prop или использовать onBeforeLift

 const onBeforeLift = () => {
  // take some action before the gate lifts
}

 return (
        <View style={styles.linearGradient}>
          <Provider store={store}>
            <PersistGate 
              loading={<Splash/>}
              onBeforeLift={this.onBeforeLift}
              persistor={persistor}>
               <Home songs={this.state.songs}/>
          </PersistGate>
         </Provider>
       </View>
    );