我有一个问题与堆栈。导航器在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。没有任何帮助。
1条答案
按热度按时间pbpqsu0x1#
在App.js中为SafeAreaView提供flex:1样式