Navigate from a class to another screen using React Navigation (React Native)-CodePudding

I am attempting to use react navigation in class. I normally use it in functions like this:

//imports...
export default function Page1({navigation}) {
//...
onPress={()=>{navigation.navigate('Page2')}}
//...
}

onPress is inside TouchableOpacity. Now I want to use it in class like this:

//imports...
export default class Page3 extends React.Component {
//...
onPress={()=>{navigation.navigate('Page4')}}
//...
}

I dont know how to pass {navigation} to class Page3. Is there a way to do this? This is my App.js

//...
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';

const Stack = createNativeStackNavigator();

import Page1 from './src/Page1';
import Page2 from './src/Page2';
import Page3 from './src/Page3';
import Page4 from './src/Page4';

export default function App() {
  return (
      <NavigationContainer>
        <Stack.Navigator>
          <Stack.Screen component={Page1} name="Page1" options={{headerShown:false}}></Stack.Screen>
          <Stack.Screen component={Page2} name="Page2" options={{headerShown:false}}></Stack.Screen>
          <Stack.Screen component={Page3} name="Page3" options={{headerShown:false}}></Stack.Screen>
          <Stack.Screen component={Page4} name="Page4" options={{headerShown:false}}></Stack.Screen>
        </Stack.Navigator>
      </NavigationContainer>
  );
}

CodePudding user response：

When using class components, use this.props

//imports...
export default class Page3 extends React.Component {
//...
onPress={()=>{this.props.navigation.navigate('Page4')}}
//...
}

EXPLANATION:

So basically in a functional component, in order to access navigation you have say {navigation} on the parameter on top of the function.

//imports...
export default function Page1({navigation}) {
//...
onPress={()=>{navigation.navigate('Page2')}}
//...
}

Instead of having the brackets on the arguments, you can say props. Props is basically sending data from one component to another.

//imports...
export default function Page1(props) {
const {navigation} = props; // aka const navigation = props.navigation. Both are same
//...
onPress={()=>{navigation.navigate('Page2')}}
//...
}

Note that you can also say without having to make the variable(You can try this if you have a functional component it will work)

onPress={()=> {props.navigation.navigate('Page2')}}

So, in our case, it's a class component. What's so special about class components is that the props are auto "imported" to the class and it is global meaning that you can access this by using this. So it would be this.props

Just like a functional component you can do:

export default class Page3 extends React.Component {
//... functions

render(){

const {navigation} = this.props; // make sure you have in this render() but outside of return.

// that is also equalavent of saying const navigation = this.props.navigation


return (
   //...
   onPress={()=>{navigation.navigate('Page4')}}
   //...

)
  }
}

Hope this makes sense. Let me know if you have any other questions!