如何使用 React 导航作为组件答案

【问题标题】：How to use React navigation as a component如何使用 React 导航作为组件
【发布时间】：2022-01-19 06:08:47
【问题描述】：

大家好，我想在我的项目中使用 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;

【问题讨论】：

标签： javascript react-native react-navigation

【解决方案1】：

希望这个解决方案有效。

小鬼点

NavigationContainer 必须包装所有导航器结构。
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

【讨论】：