React Native Navigation 不會顯示初始組件

Question

我最近開始了一個關於 react native 應用程序的大學項目，並且我已經實現了 react 導航，但問題是，主要組件實際上只是閃爍了一毫秒，然后在我嘗試運行應用程序時就消失了。 這是代碼：

import { StyleSheet, Text, View } from 'react-native';
import LoginScreen from './screens/LoginScreen';
import RegisterScreen from './screens/RegisterScreen';
import WelcomeScreen from './screens/WelcomeScreen';
import { NavigationContainer, StackActions } from '@react-navigation/native'
import { createStackNavigator } from '@react-navigation/stack'

const Stack = createStackNavigator()

export default function App() {
  return (
    <View style={styles.container}>
      <NavigationContainer>
        <Stack.Navigator initialRouteName="Welcome">
          <Stack.Screen name="Welcome" component = {WelcomeScreen} />
        </Stack.Navigator>
      </NavigationContainer>
      <View style = {styles.credit}>
        <Text style = {styles.creditText}>Developed by Nabih Amer & Ashraf Kherbawy.</Text>
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#373546',
    flexDirection: 'column',
    justifyContent: 'center',
    alignItems: 'center'
  },
  credit: {
    flexDirection: 'row',
    justifyContent: 'center',
    alignItems: 'flex-end',
  },
  creditText: {
    fontSize: 10,
    color: '#9f99b6',
    paddingBottom: 4,
  },
});

WelcomeScreen 組件實際上只是在 web 應用程序上閃爍一秒鍾然后消失，我還檢查了 expo 應用程序，它做同樣的事情。

Answer 1

看起來您在 NavigationContainer 及其堆棧中使用了額外的視圖

它應該是這樣的：

export default function App() {
  return (
    <View style={styles.container}>
      <NavigationContainer>
        <Stack.Navigator initialRouteName="Welcome">
          <Stack.Screen name="Welcome" component = {WelcomeScreen} />
          <Stack.Screen name="Login" component = {LoginScreen} />
          <Stack.Screen name="Register" component = {RegisterScreen} />
        </Stack.Navigator>
      </NavigationContainer>
    </View>
  );
}

Answer 2

堆棧導航器的概念是在不同的屏幕之間顯示和導航。 所以不要將它與視圖元素結合起來。 嘗試將不同的視圖用作屏幕並將它們用作 Stack.Screen