如何使用道具在本机反应中从一个屏幕导航到另一个屏幕? [英] How do I navigate from one screen to another in react native using props?

问题描述

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

I have my initial screen which works as expected:

 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 屏幕上时，我会看到对象列表，我称它们为学校.每所学校，我都会在 标签内渲染.每次我点击这个 标签时，我都想导航到名为 SchoolDetails.js 的第三个屏幕.我在从 MainScreen 呈现的组件中具有以下功能.我称这个组件为 SchoolsList:

It shows 3 option for screens on the bottom. When I am on the Main screen I see list of objects, I call them schools. Each school, I render inside a <TouchableOpacity> tag. Every time I click on this <TouchableOpacity> tag I want to navigate to a third screen called SchoolDetails.js. I have the following function, inside a component which I render from the MainScreen. I call this component 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?

My question is, how do I tell react that Details corresponds to SchoolDetails.js page? I tried to put it inside stacknavigator in the App.js page but it complained that I already have registered one bottomTabNavigator inside?

现在，如果我按下 标签，我会收到以下错误:

Right now, if I press on the <TouchableOpacity> tag I get the following error:

未处理负载为 {name":Details"} 的操作NAVIGATE"任何导航器.

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

您有名为详细信息"的屏幕吗?

Do you have a screen named 'Details'?

推荐答案

你可以这样做.

您需要创建一个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>

查看 在 react-navigation 文档中嵌套导航器

这篇关于如何使用道具在本机反应中从一个屏幕导航到另一个屏幕?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！