mirror of
https://github.com/zhigang1992/react-navigation.git
synced 2026-02-10 17:23:42 +08:00
d618ab382e
Exporting the underlying views makes it easy to build custom navigators on top of our views. Libraries such as react-native-router-flux rely on such exports to build custom routing solutions while being able to take advantage of our work. This can also be the solution to adding custom behaviour without us needing to add separate config to override the router.
@react-navigation/native-stack
Stack navigator for React Native using native primitives for navigation. Uses react-native-screens under the hood.
Expo is currently not supported as it includes an older version of react-native-screens.
Installation
Open a Terminal in your project's folder and run,
yarn add @react-navigation/core @react-navigation/native-stack
Now we need to install react-native-screens.
yarn add react-native-screens
To complete the linking on iOS, make sure you have Cocoapods installed. Then run:
cd ios
pod install
cd ..
To finalize installation of react-native-screens for Android, add the following two lines to dependencies section in android/app/build.gradle:
implementation 'androidx.appcompat:appcompat:1.1.0-rc01'
implementation 'androidx.swiperefreshlayout:swiperefreshlayout:1.1.0-alpha02'
Make sure to enable react-native-screens. This needs to be done before our app renders. To do it, add the following code in your entry file (e.g. App.js):
import { useScreens } from 'react-native-screens';
useScreens();
Usage
import { createNativeStackNavigator } from '@react-navigation/native-stack';
const Stack = createNativeStackNavigator();
export default function App() {
return (
<Stack.Navigator>
<Stack.Screen name="home" component={Home} options={{ title: 'Home' }} />
<Stack.Screen name="feed" component={Feed} options={{ title: 'Feed' }} />
<Stack.Screen
name="profile"
component={Profile}
options={{ title: 'Profile' }}
/>
</Stack.Navigator>
);
}