React原生堆栈,Navigator无法在Android上运行

vltsax25  于 2022-11-30  发布在  React
关注(0)|答案(1)|浏览(147)

我有一个问题与堆栈。导航器在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',
  },
});

有一个应用程序. 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。
有deps:

"@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。没有任何帮助。

pbpqsu0x

pbpqsu0x1#

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

相关问题