Wie konfigurieren Sie die Reaktionsnavigation für die Arbeit mit Android Edge-to-Edge nach Expo SDK 53? ⇐ Android

[Anonymous]

Android & Expo GO funktionierte für mich gut, bis Expo SDK 53 @React-Navigation/native . Ich habe auch SafeViewProvider ohne Erfolg ausprobiert. Das Problem ist, dass meine Ansichten aufgrund der neuen Einstellung von Edge-to-Edge unter den Statusstangen jetzt unter den Statusstangen erscheinen (sie waren in früheren Versionen in Ordnung). Edge-to-Edge kann in Expo Go oder neueren Versionen von Android nicht mehr ausgeschaltet werden.

Code: Select all

import { Text, View, SafeAreaView } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import { registerRootComponent } from 'expo';

// Ajoute cette ligne pour forcer React Navigation à utiliser un header en pur JS
const Stack = createNativeStackNavigator({
});

const EntreeScreen = ({navigation,route}) => {

return (






CENTER TEXTE !





);
}

const App = () => (




 ({
headerLeft: () => (     // bouton aide

LEFT

),
headerTitle: () => (

MON TITRE!

),
headerRight:  () => (

RIGHT

),
})}
/>


);

registerRootComponent(App);
< /code>
Ich habe diese Ergebnisse auf meinem Fone erhalten. Einer verwendet Flex: 1 und der andere mit (wie oben) Flex: 0,92 (empirisch gefunden)! Kein Umbau) < /p>
Auf meinem Tablet Das Ergebnis für Flex: 0,92 ist fast das gleiche wie bei Flex: 1 auf dem Fone. Mit 0,88 ist es ziemlich gut. Nur die Statusleiste ist grün und die untere Navigationsstange zeigt nicht die 3 Tasten, nur ein graues Banner. mit API-Reakt-nativ-safe-Gebietskontext < /p>
Grundsätzlich gefunden werden Sie
npx expo install react-native-safe-area-context< /code> < /p>
Dann importieren
import { SafeAreaView, SafeAreaProvider,  SafeAreaInsetsContext, useSafeAreaInsets,   initialWindowMetrics,}  from 'react-native-safe-area-context';

Dann fügen Sie und
ein.

Code: Select all

`const Main= ({navigation,route}) => {
return (


{/* ...  */}


< /code>
   and the navigation changes with

< /code> const app = () => (

< /p>

`