Question

我正在创建示例React Native应用。在这里，我使用反应导航。这是我的代码。

app.tsx

import { NavigationContainer } from "@react-navigation/native";
import { createStackNavigator } from "@react-navigation/stack";
import * as React from "react";

const Stack = createStackNavigator();

import StackOne from "./appNavOne";

const MainStack = () => (
  <Stack.Navigator headerMode="none">
    <Stack.Screen name="stackOne" component={StackOne} />
  </Stack.Navigator>
);

const App = () => (
  <NavigationContainer>
    <MainStack />
  </NavigationContainer>
);

export default App;

appNavOne屏幕

import { createStackNavigator } from '@react-navigation/stack';
import * as React from 'react';
import { Button, View } from 'react-native';

import StackTwo from './appNavTwo';

const Stack = createStackNavigator();

const HomeScreen = ({ navigation }) => (
  <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
    <Button title='Go to Profile' onPress={() => navigation.navigate('Profile')} />
  </View>
);

const ProfileScreen = ({ navigation }) => (
  <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
    <Button title='Go to Settings' onPress={() => navigation.navigate(StackTwo)} />
    <Button title='Go back' onPress={() => navigation.goBack()} />
  </View>
);

const StackOne = () => (
  <Stack.Navigator headerMode='none' initialRouteName='Home'>
    <Stack.Screen name='Home' component={HomeScreen} />
    <Stack.Screen name='Profile' component={ProfileScreen} />
  </Stack.Navigator>
);

export default StackOne;

appNavTwo屏幕

import { createStackNavigator } from '@react-navigation/stack';
import * as React from 'react';
import { Button, View } from 'react-native';

const Stack = createStackNavigator();

const SettingsScreen = ({ navigation }) => (
  <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
    <Button title='Go to Settings' onPress={() => navigation.navigate('Settings')} />
    <Button title='Go back' onPress={() => navigation.goBack()} />
  </View>
);

const NotificationsScreen = ({ navigation }) => (
  <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
    <Button title='Go back' onPress={() => navigation.goBack()} />
  </View>
);

const StackTwo = () => (
  <Stack.Navigator initialRouteName='Settings'>
    <Stack.Screen name='Settings' component={SettingsScreen} />
    <Stack.Screen name='Notifications' component={NotificationsScreen} />
  </Stack.Navigator>
);

export default StackTwo;

appNavOne屏幕上的这一行，给我一个错误，提示未定义有效负载的操作“ NAVIGATE”未由任何导航器处理。

<Button title='Go to Settings' onPress={() => navigation.navigate(StackTwo)} />

我在做什么错了？

Answer 1

您没有在任何导航器中使用StackTwo。

1-）将StackTwo添加到MainStack：

const MainStack = () => (
  <Stack.Navigator headerMode="none">
    <Stack.Screen name="stackOne" component={StackOne} />
    <Stack.Screen name="stackTwo" component={StackTwo} />
  </Stack.Navigator>
);

2-）更改导航。在个人资料中导航如下：

const ProfileScreen = ({ navigation }) => (
  <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
    <Button
      title="Go to Settings"
      onPress={() => navigation.navigate('stackTwo', { screen: 'Settings' })}
    />
    <Button title="Go back" onPress={() => navigation.goBack()} />
  </View>
);

要了解是否发生了导航，请在“设置”组件内更改一些文本。

const SettingsScreen = ({ navigation }) => (
  <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
    <Text>HERE GOES SETTINGS!!!</Text>
    <Button
      title="Go to Settings"
      onPress={() => navigation.navigate('Settings')}
    />
    <Button title="Go back" onPress={() => navigation.goBack()} />
  </View>
);

反应导航嵌套导航不起作用

1 个答案: