0
640
VistasHow to use Drawer Navigator & Stack Navigator combined in react-native?
Packages Used:
- "@react-navigation/drawer": "^6.1.8",
- "@react-navigation/native": "^6.0.6",
- "@react-navigation/stack": "^6.0.11",
Problem :
Image 1,2 & 3: I have implemented drawer which shows two option as HomePage and Terms & Condition. If you click on t&c option it opens its screen and same if you click on homescreen it goes back to homepage screen.
Image 1 & 4: I have made "Click for details page" text as clickable on HomeScreen and after I click it should go to details screen but throws error as image 4 I am confused on how to implement it. Where do I write Stack.Navigation code.
App.js
import * as React from 'react';
import { Button, View } from 'react-native';
import { createDrawerNavigator } from '@react-navigation/drawer';
import { NavigationContainer } from '@react-navigation/native';
import HomeScreen from './Screens/HomeScreen';
import DetailPage from './Screens/DetailPage';
import TermsCondition from './Screens/TermsCondition';
const Drawer = createDrawerNavigator();
export default function App() {
return (
<NavigationContainer>
<Drawer.Navigator initialRouteName="HomeScreen">
<Drawer.Screen name="HomeScreen" component={HomeScreen} />
<Drawer.Screen name="Term&Condition" component={TermsCondition} />
</Drawer.Navigator>
</NavigationContainer>
);
}
HomeScreen.js
export default function HomeScreen({ navigation }) {
return (
<TouchableOpacity onPress={() => navigation.navigate('DetailPage')}>
<View style={{ flexDirection: 'row' }}>
<Text style={{ fontSize: 50 }}>Click for Details Page</Text>
</View>
</TouchableOpacity>
);
}
TermsCondition.js
function TermsCondition({ navigation}) {
return (
<View style={{ flexDirection: 'row' }}>
<Text style={{fontSize:50}}>T&C Page</Text>
</View>
);
}
export default TermsCondition;
DetailPage.js
function DetailPage({ navigation}) {
return (
<View style={{ flexDirection: 'row' }}>
<Text style={{fontSize:50}}>DetailPage</Text>
</View>
);
}
export default DetailPage; Sorry for this silly question but I tried it online but confused a lot. Thank You in advance!
1 Respuestas
Responde la pregunta0
It was simple step of Nested Navigation Here is the solution for the same:
App.js
import * as React from 'react';
import { Button, View } from 'react-native';
import { createDrawerNavigator } from '@react-navigation/drawer';
import { NavigationContainer } from '@react-navigation/native';
import HomeScreen from './Screens/HomeScreen';
import DetailPage from './Screens/DetailPage';
import TermsCondition from './Screens/TermsCondition';
import { createStackNavigator } from '@react-navigation/stack';
const Drawer = createDrawerNavigator();
const Stack = createStackNavigator();
{/* Add Drawer.Navigation to a function.*/}
function Root() {
return (
<Drawer.Navigator>
<Drawer.Screen name="HomeScreen" component={HomeScreen} />
<Drawer.Screen name="Term&Condition" component={TermsCondition} />
</Drawer.Navigator>
);
}
export default function App() {
return (
<NavigationContainer>
<Stack.Navigator>
<Stack.Screen options={{
}} name="Root" component={Root} {/*Call function as Stack.Screen*/}
options={{ headerShown: false }} /> {/*This will disable function header*/}
<Stack.Screen options={{
title: 'DetailPage'
}} name="DetailPage" component={DetailPage} />
</Stack.Navigator>
</NavigationContainer>
);
}
Note: Rest All the code for DetailPage.js, HomeScreen.js,TermCondition.js is same.
Ps. Take some break from the error and return back with fresh mind. that might solve it:-)