Navigate all screens to one page-CodePudding

I build react native and expo app, I want to navigate between all my screen to one specific page(Requests page) so user able reach Requests page from all the screens I try using React Navigation Button onpress method I'm not sure did I have to build stack Navigation or just add buttons on my screens??

Home.js

import Rect from 'react';
import {View, Text, Button, StyleSheet} from 'react-native';
import RequestsScreen from '../screens/Requests'

const HomeScreen = ({navigation}) => {
    return(
        <View style={styles.container}>
            <Text>Home Screen</Text>
             <Button
        title="Go to 'Requests"
        onPress={() => navigation.navigate('RequestsScreen')} />
        </View>
    )
}

export default HomeScreen;

const styles = StyleSheet.create({
    container:{
        flex:1 ,
        alignItems: 'center',
        justifyContent: 'center',
        backgroundColor: '#8fcbbc'
    },
})

CodePudding user response：

Since you want to perform the same navigation action on all your screens, I would suggest that you implement a component that does precisely that and reuse it in all your screens.

You will need to implement the needed structure which is expected by react-native-navigation as well.

I will use a StackNavigator in this example but it works the same for all navigators (if you want to nest navigators, then you might need to adjust a few things).

You can find a more precise documentation here.

The component that performs the navigation

const NavigationButton = (props) => {
   // we could pass this as a prop as well, but this should be more convenient
   const navigation = useNavigation()

   // provide the possibility to reuse this component for different navigation routes. set a default here
   const title = props.title || "Go to request page" 
   const route = props.route || "Requests"
   
   return <Button title={title} onPress={() => navigation.navigate(route)}></Button>
}
export default NavigationButton;

Example App

const Stack = createStackNavigator();

const App = () => {
 return (
    <NavigationContainer>
       <Stack.Navigator
        screenOptions={{
          headerShown: false,
        }}>
            <Stack.Screen name="ScreenA" component={ScreenA} />
            <Stack.Screen name="ScreenB" component={ScreenB} />
            <Stack.Screen name="Requests" component={RequestsScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

export default App;

ScreenA

const ScreenA = () => {
   // render whatever and use the NavigationButton here to navigate to RequestsScreen
   return <View style={{margin: 40}}>
       <NavigationButton></NavigationButton>
   </View>
}
export default ScreenA;

ScreenB

const ScreenB = () => {
   // render whatever and use the NavigationButton here to navigate to RequestsScreen
   return <View style={{margin: 40}}>
       <NavigationButton></NavigationButton>
   </View>
}
export default ScreenB;

RequestsPage

const RequestsScreen = () => {
  // render whatever
  return <></>
}
export default RequestsScreen;