let's create a navigation of two screens using stack navigation
1. install expo-cli to create expo apps:
npm install -g expo-cli@latest
2. install now are react-native-screens and react-native-safe-area-context:
npm install @react-navigation/native
3. Installing dependencies into an Expo managed project
npx expo install react-native-screens react-native-safe-area-context
4. create expo project named "navig":
npx create-expo-app navig
5. Installing the native stack navigator library: npm install @react-navigation/native-stack
a. open app.js
b. from react-navigation/native import the NavigationContainer container in app.js
example:
import { NavigationContainer } from '@react-navigation/native';
c. use NavigationConatiner tag in app.js:
example:
import { StyleSheet, Text, View } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
export default function App() {
return (
<NavigationContainer>
</NavigationContainer>
);
}
d. from react-navigation/native-stack import the createNativeStackNavigator in app.js and use it in as function.
import { Button, StyleSheet, Text, View } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
const Stack=createNativeStackNavigator()
export default function App() {
return (
<NavigationContainer>
<Stack.Navigator>
</Stack.Navigator>
</NavigationContainer>
);
}
e.define screens using stack object.
import { Button, StyleSheet, Text, View } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
const Stack=createNativeStackNavigator()
export default function App() {
return (
<NavigationContainer>
<Stack.Navigator>
<Stack.Screen name='login page' component={Login}/>
<Stack.Screen name='Home page' component={Home}/>
</Stack.Navigator>
</NavigationContainer>
);
}
function Home(data)
{
return (
<View>
<Text>home screen</Text>
<Button title='login' onPress={()=>data.navigation.navigate("Login")}/>
</View>
)
}
const Login=(props)=>
{
return (
<View>
<Text>login screen</Text>
<Button title='home' onPress={()=>props.navigation.navigate("Home")}/>
</View>
)
}
const styles = StyleSheet.create({
container: {
},
});
0 Comments