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

我知道这是一个常见的问题，但我似乎无法让它发挥作用

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

如果有人能告诉我实现此功能的最佳方法或链接最佳示例，我将不胜感激

---

谢谢

查看React Navigator的开始指南

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

---

但我个人建议您使用react导航，因为假设您要使用，这是在屏幕之间导航的正确方式。您的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>
  );
}

import*as React from'React'；
从“react native”导入{按钮、视图、文本}；
从'@react-navigation/native'导入{NavigationContainer}；
从'@react navigation/stack'导入{createStackNavigator}；
函数应用程序（{navigation}）{
返回(
家
navigation.navigate（'other'）}
/>
);
}

---

通过单击按钮，上述功能将导航到不同的屏幕。

以下是一个简单的示例：

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>
  );
} 

从“react native”导入{按钮，视图}；
从'@react-navigation/native'导入{NavigationContainer}；
从'@react navigation/stack'导入{createStackNavigator}；
功能主屏幕（{navigation}）{
返回(
navigation.navigate（'Profile'）}
/>
);
}
函数配置文件屏幕（{navigation}）{
返回(
navigation.navigate（'Notifications'）}
/>
navigation.goBack（）}/>
);
}
函数通知屏幕（{navigation}）{
返回(
导航。导航（'Settings'）}
/>
navigation.goBack（）}/>
);
}
函数设置屏幕（{navigation}）{
返回(
navigation.goBack（）}/>
);
}
const Stack=createStackNavigator（）；
函数MyStack（）{
返回(
);
}
导出默认函数App（）{
返回(
);
} 

---

那么，对于“另一个”，您如何在App.js中定义另一个？因为我看到过一些示例，其中人们有类似“从‘根…’导入屏幕1”的内容。我通过按下按钮导入了我试图导航到的屏幕，并用我的屏幕名替换了“另一个”，结果出现错误：“navigation.navigate不是一个函数。（在‘navigation.navigate（“SignUpScreen”），‘navigation.navigate’未定义）我这里的问题是，您已经定义了App.js文件上的所有页面，我的屏幕将非常详细，因此我无法在一个文件中为所有屏幕编写代码。您可以导入一个外部组件（屏幕）并使用它。

import{ScreenX}from./path_to_ScreenX'.