在不同组件之间导航 React Native

Question

So I've been trying to understand how to do this for like 2 hours now but I can't seem to figure it out. I want to be able to go from one component to another when the button is clicked.

First.js

import React, {useState} from 'react';
import { StyleSheet, StatusBar, SafeAreaView, View, Text } from 'react-native';
import {Button} from 'react-native-elements';

import { Second } from './Second.js';


export class Information extends React.Component {
    
    render() {
        return (
        <SafeAreaView style={styles.container}>
                <View style={styles.footer}>
                    <View style={styles.footerBtn}>
                    <Button 
                        titleStyle={{
                            fontSize: 16,
                        }}
                        buttonStyle={{
                            backgroundColor: '#007AFF'
                        }}
                        raised={true}
                        title="Continue"
                        onPress={() => { this.props.navigation.navigate(Second) }}
                        color="#007AFF"
                    />
                    </View>
                </View>
        </SafeAreaView>
        );
    }
}

Second.js

import React from 'react';
import { StyleSheet, StatusBar, SafeAreaView, Dimensions, View, Text } from 'react-native';

export class Postcode extends React.Component {
    render() {
        return (
        <SafeAreaView style={styles.container}>
            <StatusBar />
            <Text> Wow this is a cool second page</Text>
        </SafeAreaView>
        );
    }
}

So I cut out some of my code with all the extra stuff but above is the two basic files. They're both in the same folder and when I click the button I want to be able to go from first page to second page. I feel like I'm dumb and the answer is really obvious but I just can't figure it out.

Answer 1

I think the best way to do this would be using Stack Navigation, like in this example of a project that I have:

the stack component:

 import React from 'react'; import Home from '../pages/Home'; import Sales from '../pages/Sales'; import NewSale from '../pages/Sales/NewSale'; import { createStackNavigator } from '@react-navigation/stack'; const Stack = createStackNavigator(); function Stacks() { return ( <Stack.Navigator> <Stack.Screen name='Home' component={Home} options={{ headerShown: false }} /> <Stack.Screen name='Negociação' component={Sales} /> <Stack.Screen name='Nova Negociação' component={NewSale} /> </Stack.Navigator> ); } export default Stacks;

Where I click the button to navigate:

 import React from 'react'; import * as S from './styles'; export default function Sales({ navigation }) { return ( <S.Container> <S.Add onPress={() => navigation.navigate('Nova Negociação')}> </S.Add> </S.Container> ) }

The app.tsx or app.js

 import 'react-native-gesture-handler'; import { NavigationContainer } from '@react-navigation/native'; import React from 'react'; import { StatusBar } from 'react-native'; import styles from './styles/styles'; import Stacks from './stackNav'; const App: React.FC = () => ( <NavigationContainer> <StatusBar barStyle="light-content" backgroundColor={styles.primaryColor} /> <Stacks /> </NavigationContainer> ); export default App;

Edit: Check this expo snack: https://snack.expo.dev/@guilhermemoretto12/react-native-stack-navigator-example