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;

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

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:

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

Do you have a screen named 'Details'?

回答1:

You can do something like this.

You need to create a 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>
  );
};

Then you can modify the Tab.Navigator to

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

Have a look at Nesting navigators in react-navigation docs

回答2:

I tried to create some basic app with parts of your coding: https://snack.expo.io/@adriaandebolle/reactnavigation5

It contains several ways to navigate:

Using ref
Using this.props.navigation
Passing navigation to function

The navigation prop is automatically added to a component of ReactNavigation.

As example I added a separate file Details.js which navigates using this.props.navigation.navigate like you wanted.

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

Within your main App.js file you import additional files and add them into whatever navigation structure you like (see answer emkarachchi):

import DetailsScreen from './Details';

来源：https://stackoverflow.com/questions/65753932/how-do-i-navigate-from-one-screen-to-another-in-react-native-using-props

标签

react-native

react-navigation