在 React Native 中嵌套导航器

Question

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

简单地说：

我可以在 App.js 下创建一个堆栈导航器，它引用“home.js”的堆栈屏幕，该屏幕在其 .js 文件中包含一个按钮 - 然后导航到“[=40” =]" 和 onPress 事件，还是我这里全错了？

新编辑：

下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

在 React Native 中嵌套导航器

Nesting navigators in react native

nested

reactjs

react-native

react-navigation