web-dev-qa-db-fra.com

React native: TypeError: null n'est pas un objet (évaluation de 'SplashScreen.preventAutoHide')

Mon application native React fonctionnait très bien avant d'utiliser expo eject. Je l'ai éjecté car j'ai maintenant l'intention de créer et de publier l'application sur l'App Store ios. Dès que j'essaye de démarrer l'application éjectée en utilisant react-native run-ios après son éjection, j'obtiens l'exception ci-dessous.

Quelqu'un pourrait-il vous aider à comprendre ce qui cause ce problème et comment y remédier?

réagissez aux versions natives comme suit:

react-native-cli: 2.0.1
react-native: 0.61.5

enter image description here

TypeError: null is not an object (evaluating 'SplashScreen.preventAutoHide')

This error is located at:
    in AppLoading (at AppLoading.js:52)
    in AppLoading (at App.js:464)
    in App (at renderApplication.js:40)
    in RCTView (at AppContainer.js:101)
    in RCTView (at AppContainer.js:119)
    in AppContainer (at renderApplication.js:39)

preventAutoHide
    SplashScreen.js:4:21
AppLoading#constructor
    AppLoadingNativeWrapper.js:6:8
renderRoot
    [native code]:0
runRootCallback
    [native code]:0
renderApplication
    renderApplication.js:52:52
runnables.appKey.run
    AppRegistry.js:116:10
runApplication
    AppRegistry.js:197:26
callFunctionReturnFlushedQueue
    [native code]:0
iosreact-nativeexpo
6
user3391835

Comme il ressort de la documentation, SplashScreen est une api intégrée pour les applications d'expo, et depuis que vous l'avez éjectée, elle génère une erreur car elle ne peut pas être utilisée.

Vous pouvez le voir dans la documentation expo splashscreen .

Vous devez d'abord télécharger npm i expo-splash-screen

Et puis modifiez votre instruction d'importation en:

import * as SplashScreen from 'expo-splash-screen';

J'espère que ça aide. n'hésitez pas à avoir des doutes

3
Gaurav Roy

Après avoir parcouru cette SO page, puis fouillé dans certains liens, en particulier this page expo où ils fournissent en quelque sorte une solution pour cela, j'ai pu obtenir mon application en cours d'exécution après environ 3 heures de lutte. Ils n'ont ajouté aucun exemple de composant fonctionnel, donc je partage mon code ci-dessous au cas où quelqu'un viendrait ici chercher la solution.

import { Asset } from "expo-asset";
import * as Font from "expo-font";
import React, { useState, useEffect } from "react";
import { Platform, StatusBar, StyleSheet, View } from "react-native";
import { Ionicons } from "@expo/vector-icons";
import * as SplashScreen from 'expo-splash-screen';

import AppNavigator from "./navigation/AppNavigator";

export default props => {
  const [isLoadingComplete, setLoadingComplete] = useState(false);

  const theme = {
    ...DefaultTheme,
    roundness: 2,
    colors: {
      ...DefaultTheme.colors,
      primary: "#E4002B",
      accent: "#E4002B",
    },
  };

  useEffect(() => {
    async function asyncTasks() {
      try {
        await SplashScreen.preventAutoHideAsync();
      } catch (e) {
        console.warn(e);
      }
      await loadResourcesAsync()
      setLoadingComplete(true);
    }

    asyncTasks()
  }, []);

  return (
    !isLoadingComplete && !props.skipLoadingScreen ? null :
    <View style={styles.container}>
      {Platform.OS === "ios" && <StatusBar barStyle="default" />}
      <AppNavigator />
    </View>
  );
}

async function loadResourcesAsync() {
  await Promise.all([
    Asset.loadAsync([
      require("./assets/images/logo.png") // Load your resources here (if any)
    ]),
    Font.loadAsync({
      // You can remove this if you are not loading any fonts
      "space-mono": require("./assets/fonts/SpaceMono-Regular.ttf"),
    }),
  ]);
  await SplashScreen.hideAsync();
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#fff",
  },
});
0
Hashir Baig