React Native - 导航导航但不在 android/ios 上呈现元素，但在网络上完美呈现

Question

出于某种原因，当我在 Web 上（使用 Expo）运行 时，我可以看到这些元素，当我单击“运行 in web browser”时，它们会完美呈现。

然而，当我尝试在 iOS 或 Android 上执行此操作时，它只显示一个空白屏幕并且只显示 LinearGradient。

当我 运行 Android 模拟器并将其与 React Native Dev 工具结合使用时，我可以在 devtool 中看到元素，但它们不会显示在模拟器中。我尝试呈现的组件称为 Login.tsx，如果我将 Login.tsx 中的所有内容复制到我的 App.tsx，它会在 Web 上完美呈现，Android 和 iOS .

我做错了什么？

const Stack = createNativeStackNavigator();


const Navigation: React.FC = () => {
    return (
        <NavigationContainer>
            <Stack.Navigator
                initialRouteName="Login"
            >
                <Stack.Screen
                    name="Login"
                    component={Login}
                />
                <Stack.Screen
                    name="LostPassword"
                    component={LostPassword}
                />
                <Stack.Screen
                    name="Register"
                    component={Register}
                />
            </Stack.Navigator>
        </NavigationContainer>)
}

export default Navigation;



const App: React.FC = () => {
  return (
    <LinearGradient
      colors={["#2D1C96", '#190E60']}
      style={styles.linearGradient}
    >
      <View style={styles.container}>
        <Navigation />
        <Toast ref={(ref) => Toast.setRef(ref)} />
      </View>
    </LinearGradient>
  );
}

Answer 1

解决了。

对于面临相同问题的任何人：

NavigationContainer 不应在视图内。它应该用作根组件