如何使用道具从一个屏幕导航到另一个屏幕以响应本机？

Question

我的初始屏幕按预期工作：

 function MyTabs() {
  return (
    <Tab.Navigator>
      <Tab.Screen name="Schools" component={MainScreen} />
      <Tab.Screen name="Other" component={OtherScreen} />
    </Tab.Navigator>
  );
}


const Tab = createBottomTabNavigator();

function App() {
  return (
    <NavigationContainer>
      <MyTabs />
    </NavigationContainer>
  );
}

export default App;

它在底部显示了 3 个屏幕选项。当我在 Main 屏幕上时，我看到了对象列表，我称它们为学校。每所学校，我在 <TouchableOpacity> 标签内渲染。每次单击此 <TouchableOpacity> 标签时，我都想导航到名为 SchoolDetails.js 的第三个屏幕。我在从 MainScreen 渲染的组件中有以下功能。我称这个组件为 SchoolsList:

const SchoolsList = ({ item, navigation }) => {
...
...
renderItem={({ item }) => {
          return (
            <TouchableOpacity
              onPress={() => navigation.navigate('Details')}
            >
              <Detail result={item} />
            </TouchableOpacity>
          );
        }}

我的问题是，我如何告诉 React Details 对应于 SchoolDetails.js 页面？我试图将它放在 App.js 页面的 stacknavigator 中，但它抱怨说我已经在里面注册了一个 bottomTabNavigator?

现在，如果我按下 <TouchableOpacity> 标签，我会收到以下错误消息：

The action 'NAVIGATE' with payload {"name":"Details"} was not handled by any navigator.

Do you have a screen named 'Details'?

Answer 1

你可以这样做。

您需要创建一个StackNavigator

import { createStackNavigator } from "@react-navigation/stack";
.....
.....
const Stack = createStackNavigator();

export const RootStack = () => {
  return (
    <Stack.Navigator initialRouteName="Schools">
      <Stack.Screen name="Schools" component={MainScreen}/>
      <Stack.Screen name="Details" component={DetailsScreen} />
    </Stack.Navigator>
  );
};

那么可以将Tab.Navigator修改为

 function MyTabs() {
  return (
    <Tab.Navigator>
      <Tab.Screen name="Root" component={RootStack} />  // Change this line
      <Tab.Screen name="Other" component={OtherScreen} />
    </Tab.Navigator>

看看Nesting navigators in react-navigation docs

Answer 2

我尝试使用您的部分代码创建一些基本应用程序：https://snack.expo.io/@adriaandebolle/reactnavigation5

它包含几种导航方式：

使用参考
使用this.props.navigation
将导航传递给函数

导航道具自动添加到 ReactNavigation 的组件中。

例如，我添加了一个单独的文件 Details.js，它使用 this.props.navigation.navigate 进行导航，就像您想要的那样。

import * as React from 'react';
import { Text, View, StyleSheet, Button } from 'react-native';

export default class DetailsScreen extends React.Component {
  render() {
    return (
      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
        <Text>Details!</Text>
        <Button title="Go back home! (Using this.props)" onPress={() => this.props.navigation.navigate('Schools')} />
      </View>
    );
  }
}

在您的主 App.js 文件中，您可以导入其他文件并将它们添加到您喜欢的任何导航结构中（请参阅答案 emkarachchi）：

import DetailsScreen from './Details';

如何使用道具从一个屏幕导航到另一个屏幕以响应本机？

How do I navigate from one screen to another in react native using props?

react-native

react-navigation