如何在 React Native 上的页面之间导航？答案

【问题标题】：How to navigate between pages on React Native?如何在 React Native 上的页面之间导航？
【发布时间】：2020-10-19 18:32:38
【问题描述】：

我知道这是一个常见问题，但我似乎无法解决这个问题。

我希望能够通过单击按钮导航到另一个屏幕。我见过很多人使用这些堆栈并安装许多依赖项。首先，当我安装这些依赖项时，我遇到了很多错误，其次，我的 App.js 文件当前返回了我现有的屏幕之一。当他们使用这些堆栈时，我似乎找不到他们在 App.js 函数中返回屏幕的示例。

如果有人可以向我展示实现此功能的最佳方式或链接最佳示例，将不胜感激。

谢谢

【问题讨论】：

标签： android ios reactjs react-native navigation

【解决方案1】：

查看React Navigator的入门指南here

【讨论】：

【解决方案2】：

如果您只想在 2 个屏幕之间导航，您可以在 App.js 中使用条件渲染，如下所示： ... 返回（一些条件？组件1：组件2； )

但我个人建议您使用反应导航，因为它是在屏幕之间导航的正确方法

【讨论】：

【解决方案3】：

假设您要使用react navigation。您的 App.js 函数可能如下：

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

function App({ navigation }) {
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text>Home</Text>
      <Button
        title="Another Screen"
        onPress={() => navigation.navigate('Another')}
      />
    </View>
  );
}

上面的函数将通过点击按钮导航到不同的屏幕。

【讨论】：

那么，对于'Another'，如何在App.js 中定义另一个？因为我见过一些例子，人们有“从'root ...'导入Screen1”之类的东西。
我通过按下按钮导入了我试图导航到的屏幕并将“另一个”替换为我的屏幕名称，我收到错误消息：“navigation.navigate 不是一个函数。（在'navigation.navigate("SignUpScreen")', 'navigation.navigate' 未定义）

【解决方案4】：

这是一个简单的例子：

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

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

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

function NotificationsScreen({ navigation }) {
  return (
    <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>
  );
}

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

const Stack = createStackNavigator();

function MyStack() {
  return (
    <Stack.Navigator>
      <Stack.Screen name="Home" component={HomeScreen} />
      <Stack.Screen name="Notifications" component={NotificationsScreen} />
      <Stack.Screen name="Profile" component={ProfileScreen} />
      <Stack.Screen name="Settings" component={SettingsScreen} />
    </Stack.Navigator>
  );
}

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

Example in Expo

【讨论】：

我的问题是您已经在 App.js 文件中定义了所有页面，我的屏幕将非常详细，因此我无法在一个文件中编写所有屏幕的代码。跨度>
您可以导入外部组件（屏幕）并使用它。 import {ScreenX} from './path_to_screenX' ....... <Stack.Screen name="ScreenX" component={ScreenX} />