React Native Stack.Navigator 在 Android 上不起作用

Question

我对Stack有一个问题。Android上的导航器。由于一些奇怪的原因，它就是不工作。

有一个简单的代码:

import React from 'react';
import {createNativeStackNavigator} from '@react-navigation/native-stack';
import {ROUTES} from '../../constants/routes';
import {AuthScreen, LoginScreen, RegisterScreen} from './screens';
export const Unauthorized = () => {
const Stack = createNativeStackNavigator();
return (
<Stack.Navigator
initialRouteName={ROUTES.ROUTE_AUTH}
screenOptions={{headerShown: false}}>
<Stack.Screen name={ROUTES.ROUTE_AUTH} component={AuthScreen} />
<Stack.Screen name={ROUTES.ROUTE_LOGIN} component={LoginScreen} />
<Stack.Screen name={ROUTES.ROUTE_REGISTER} component={RegisterScreen} />
</Stack.Navigator>
);
};

看起来简单。AuthScreen组件也很简单:

import React from 'react';
import {SafeAreaView, StyleSheet, Text} from 'react-native';
export const AuthScreen = () => {
return (
<SafeAreaView>
<Text style={styles.text}>Auth screen</Text>
</SafeAreaView>
);
};
const styles = StyleSheet.create({
text: {
color: 'red',
},
});

有一个App.tsx:

import 'react-native-gesture-handler';
import React from 'react';
import {SafeAreaView, StatusBar, useColorScheme} from 'react-native';
import {Colors} from 'react-native/Libraries/NewAppScreen';
import {ApolloProvider} from '@apollo/client';
import client from './src/apollo';
import {SplashScreen} from './src/screens';
const App = () => {
const isDarkMode = useColorScheme() === 'dark';
const backgroundStyle = {
backgroundColor: isDarkMode ? Colors.darker : Colors.lighter,
};
return (
<ApolloProvider client={client}>
<SafeAreaView style={backgroundStyle}>
<SplashScreen />
<StatusBar backgroundColor="white" barStyle="dark-content" />
</SafeAreaView>
</ApolloProvider>
);
};
export default App;

但是当应用程序正在运行时屏幕是空的。但是如果我移除Stack。导航器，然后内容就可见了

我做过的任何关于依赖项或MainActivity的注释

There is deep:

"@apollo/client": "^3.7.1",
"@react-navigation/native": "^6.0.6",
"@react-navigation/native-stack": "^6.2.5",
"@react-navigation/stack": "^6.0.11",
"graphql": "^16.6.0",
"react": "18.1.0",
"react-hook-form": "^7.39.1",
"react-native": "0.70.4",
"react-native-bootsplash": "^4.3.3",
"react-native-gesture-handler": "^2.8.0",
"react-native-mmkv-storage": "^0.8.0",
"react-native-safe-area-context": "^4.4.1",
"react-native-screens": "^3.10.0"

我花了4个小时，我不知道如何得到任务。导航器显示内容....

我试图使用

import {createStackNavigator} from '@react-navigation/stack'
const Stack = createStackNavigator()

而不是createNativeStackNavigator我试着换版本。没有什么帮助。

Answer 1

为apps .js中的SafeAreaView赋予flex:1样式