1

我正在创建一个示例反应本机应用程序。这里我使用反应导航。这是我的代码。

应用程序.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;

appNav单屏

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;

appNav双屏

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 屏幕上的这一行，给我一个错误，提示“未定义有效负载的操作“导航”未由任何导航器处理。

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

我在这里做错了什么？

4

1 回答 1

2

您没有在任何导航器中使用 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-) 在配置文件中像这样更改 navigation.navigate：

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>
);
于 2020-04-06T10:42:58.873 回答