如何使用 React 导航作为组件

Posted 2023-02-16

【中文标题】如何使用 React 导航作为组件

【英文标题】：How to use React navigation as a component

【发布时间】：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;

 

【参考方案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