在本机反应中嵌套导航器

Question

我是 react 初学者，很难理解 react 导航的工作原理。我应该在 App.js 中编写所有导航代码还是可以嵌套在不同的屏幕中（home.js 等）。

简单地说：

• 我能否在 App.js 下创建一个堆栈导航器，它引用“home.js”的堆栈屏幕，该屏幕在其 .js 文件中包含一个按钮 - 进而通过 onPress 事件导航到“settings.js”，还是我都错了？

新编辑：

在 App.js 下：

 function HomeNavigator() {
  return(
    <HomeStack.Navigator>
        <HomeStack.Screen 
        name="home" 
        component={Home}
        options={{
          headerShown: false
        }}/>
    </HomeStack.Navigator>
  )
}


export default function App() {
  return (
<NavigationContainer>
  <HomeNavigator/>
</NavigationContainer>
    )
}

然后在home.js下：

function Home({navigation}) {
    return (
    <SafeAreaView style={styles.center}>
        <Image style={styles.icon} source={require("../assets/logo_01.png")}/>
        <AppButton title="Create room" onPress={()=> navigation.navigate("Settings")}/>         
    </SafeAreaView>
    );
}

export default Home;

提前谢谢你，我想了解它是如何工作的，我快疯了

Answer 1

编辑已编辑的问题：

您需要在HomeStack 中声明一个屏幕并将一个组件传递给它以呈现为设置屏幕，见下文：

function SettingsScreen() {
  return(
    <Text>You are on Settings Screen</Text>
  )
}

function HomeNavigator() {
  return (
    <HomeStack.Navigator initialRouteName='Home'>
      <HomeStack.Screen
        name='Home'
        component={HomeScreen}
        options={{
          headerShown: false, //example of options
        }}
      />
      <HomeStack.Screen name='Settings' component={SettingsScreen} /> //You need to declare your screen name and pass to it a component
    </HomeStack.Navigator>
  );
}

---

嵌套导航器说明

您可以嵌套导航器。你可以这样做：

import { createStackNavigator } from '@react-navigation/stack';

const HomeStack = createStackNavigator();

function HomeNavigator() {
  return (
    <HomeStack.Navigator initialRouteName='Home'>
      <HomeStack.Screen
        name='Home'
        component={HomeScreen}
        options={{
          headerShown: false, //example of options
        }}
      />
      <HomeStack.Screen name='Settings' component={SettingsScreen} />
    </HomeStack.Navigator>
  );
}

const RootStack = createStackNavigator();

function RootNavigator() {
  return (
    <RootStack.Navigator initialRouteName='Home'>
      <RootStack.Screen name='Home' component={HomeNavigator} />
      //other screens/navigator if you need
    </RootStack.Navigator>
  );
}

export default function App() {
    return (
      <SafeAreaProvider>
        <RootNavigator />
      </SafeAreaProvider>
    );
}

嵌套导航器文档here

从HomeScreen 导航：

function HomeScreen({ navigation }) {
  return (
    <TouchableOpacity onPress={() => navigation.navigate("Settings")}>
      <Text>Go to Settings</Text>
    </TouchableOpacity>
  );
}

导航到新屏幕的文档here