Warum meine React-Native-Safe-Area-Context-Bibliothek nicht funktioniert ⇐ JavaScript

[Guest]

Ich erstelle eine mobile App mit React-Native. Nach der Installation installiere ich die React-Native-Safe-Area-Context-Bibliothek. Mein Projekt verhält sich unerwartet.
Zuerst, wenn ich diese Bibliothek installiere Meine Datei „autolinking.json“ wird leer, daher füge ich den Code der Datei „autolinking.json“ manuell hinzu.
Dieses Problem wird jetzt nicht richtig behoben, wenn ich mein Projekt installiere. Die Datei „autolinking.json“ wird leer. Ich füge die Konfiguration manuell hinzu Das Gleiche passiert wenn ich diese Bibliothek deinstalliere.
Um dieses Problem zu beheben, kopiere ich meine gesamte autolinking.json-Datei vor der Installation dieser Bibliothek und nach der Installation dieser Bibliothek und zum Zeitpunkt der Projekterstellung, wenn meine autolinking.json Die Datei wird leer. Ich habe die Konfiguration eingefügt, die ich zuvor kopiert hatte.
Aber es ist ein neues Problem aufgetreten und das Problem ist, dass ich vor diesem Problem stehe

Code: Select all

ViewManagerResolver returned null for either RNCSafeAreaProvider or RCTRNCSafeAreaProvider, existing names are: [DebuggingOverlay, RCTSafeArea View, RCTModal HostView, RCTTextInlineImage, AndroidProgressBar, AndroidHorizontal ScrollView, RCTImageView, RCTText, Android Horizontal ScrollContentView, UnimplementedNativeView, RCTScrollView, RCTView, Android DrawerLayout, AndroidSwitch, RCTVirtualText, AndroidSwipeRefreshLayout, RCTRawText, Android TextInput]

Code der filter.tsx-Datei
zum Importieren nützlicher Importe

Code: Select all

import {
SafeAreaView,
} from "react-native-safe-area-context";
import { FlatList, StatusBar, StyleSheet, Text, View } from "react-native";

Code: Select all

const DATA = [
{
id: 'bd7acbea-c1b1-46c2-aed5-3ad53abb28ba',
title: 'All',
},
{
id: '3ac68afc-c605-48d3-a4f8-fbd91aa97f63',
title: 'Programming',
},
{
id: '58694a0f-3da1-471f-bd96-145571e29d72',
title: 'Sports & Fitness',
}
];

Code: Select all

type ItemProps = {title: string};

const Item = ({title}: ItemProps) => (

{ title }

);

const Filter = () => (

 }
keyExtractor={item => item.id}
/>

);

Stylesheet

Code: Select all

const styles = StyleSheet.create({
container: {
flex: 1,
marginTop: StatusBar.currentHeight || 0,
},

item: {
backgroundColor: 'blueviolet',
color: 'black',
padding: 20,
marginVertical: 8,
marginHorizontal: 16,
},

title: {
fontSize: 32,
},
});

export default Filter;

Code der App.tsx-Datei

Code: Select all

import React from "react";

import Filter from "./component/filter";
import { StyleSheet } from "react-native";
import { SafeAreaProvider, SafeAreaView } from "react-native-safe-area-context";

function MainApp():React.JSX.Element {
return (





);
}

const styles = StyleSheet.create({
container: {
backgroundColor: "white",
}
});

export default MainApp;

Wenn ich diese Bibliothek deinstalliere, läuft mein Projekt einwandfrei.
Ich erstelle eine Filterschaltfläche. Mein Projekt basiert im Grunde auf der Blogging-App, die ich mache mobile App des Blog-App-Projekts.
Warum das passiert und wie man diesen Fehler behebt.