javascript - 如何将 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;

App.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。

你可以阅读官方文档:
Click & Read Official Doc

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;

App.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;

希望这会奏效:)
Demo