Wie konfigurieren Sie die Reaktionsnavigation für die Arbeit mit Android Edge-to-Edge nach Expo SDK 53?
Posted: 13 May 2025, 14:41
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.
Dann fügen Sie und
ein. < /code> const app = () => (
< /p>
`
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< /p>
`