React Native Stack.Navigator 不适用于 Android

Question

我在 Android 上遇到 Stack.Navigator 问题。它只是由于某种奇怪的原因不起作用。

有简单的代码：

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.Navigator 那么内容就会变得可见

我所做的任何带有依赖项或 MainActivity 的注释。

有部门：

"@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个小时，但我不知道如何让Stask.Navigator显示内容....

我尝试过使用

import {createStackNavigator} from '@react-navigation/stack'

const Stack = createStackNavigator()

而不是 createNativeStackNavigator 我尝试更改版本。没有任何帮助。

Answer 1

在 App.js 中为 SafeAreaView 提供 flex:1 样式

Answer 2

只需从应用程序根视图或安全区域视图中删除以下样式属性

justifyContent: "center",
alignItems: "center",