如何使用 React 導航作為組件

Question

大家好，我想在我的項目中使用 ViewCart 文件作為組件，但它沒有顯示，不知道為什么？ 但是當我在我的 App.js 文件中的整個代碼上編寫它時，它工作正常。 請告訴我為什么會這樣，並告訴我如何在我的項目中使用 Viewcart 文件作為組件。 如果您有任何疑問，請隨時詢問。

// ViewCart.js

我想在我的 App.js 文件中使用這個文件作為組件

import * as React from 'react';
import { View, Text } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';

function HomeScreen() {
  return (
    <View >
      <Text>Home Screen</Text>
    </View>
  );
}

const Stack = createNativeStackNavigator();

function ViewCart() {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen name="Home" component={HomeScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

export default ViewCart;

應用程序.js

import { StatusBar } from "expo-status-bar";
import React from "react";
import { StyleSheet, Text, View } from "react-native";
import ViewCart from "./screens/ViewCart";

function App() {
  return (
    <View style={styles.container}>
      <ViewCart />
      {/* <StatusBar style="auto" /> */}
    </View>
  );
}
const styles = StyleSheet.create({
  // container: {
  //   flex: 1,
  //   backgroundColor: "#fff",
  //   alignItems: "center",
  //   justifyContent: "center",
  // },
});

export default App;

 

Answer 1

希望這個解決方案有效。

小鬼點數

1. NavigationContainer 必須包裝所有導航器結構。
2. NavigationContainer 將添加到我們應用程序的根目錄中。

只需從ViewCart.js中刪除NavigationContainer並在App.js中添加NavigationContainer 。

你可以閱讀官方文檔：
https://reactnavigation.org/docs/hello-react-navigation#creating-a-native-stack-navigator

ViewCart.js

import * as React from 'react';
import { View, Text } from 'react-native';
import { createNativeStackNavigator } from '@react-navigation/native- stack';

function HomeScreen() {
  return (
      <View >
        <Text>Home Screen</Text>
      </View>
    );
 }

const Stack = createNativeStackNavigator();

function ViewCart() {
  return (
     <>
      <Stack.Navigator>
      <Stack.Screen name="Home" component={HomeScreen} />
      </Stack.Navigator>
     </>
  );
 }

export default ViewCart;

應用程序.js

import { StatusBar } from "expo-status-bar";
import React from "react";
import { StyleSheet, Text, View } from "react-native";
import { NavigationContainer } from '@react-navigation/native';

import ViewCart from "./ViewCart";

function App() {
  return (
      <NavigationContainer style={styles.container}>
        <ViewCart />
        {/* <StatusBar style="auto" /> */}
      </NavigationContainer>
   );
 }

const styles = StyleSheet.create({
 container: {
   flex: 1,
   backgroundColor: "#fff",
   alignItems: "center",
   justifyContent: "center",
 },
});

export default App;

希望這項工作:)