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

Question

由于某种原因，当我在网络上运行（使用 Expo）时，我可以看到这些元素，并且当我单击“在网络浏览器中运行”时它们完美呈现。

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

当我运行 Android Emulator 并将其与 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 不应该在 View 中。它应该被用作根组件