mirror of
https://github.com/zhigang1992/react-navigation.git
synced 2026-04-25 13:05:26 +08:00
1a9f3542d7
The index change event fires after swipe animation. If you quickly navigate to a new screen in stack before animation finishes, the index change event will fire after the previous navigation event. By this time, the tab navigator is not focused anymore. Using the JUMP_TO action instead of NAVIGATE avoids this issue.
React Navigation Tabs
Tab navigators for React Navigation.
Installation
Open a Terminal in the project root and run:
yarn add react-navigation-tabs
If you are using Expo, you are done. Otherwise, continue to the next step.
Install and link react-native-gesture-handler and react-native-reanimated. To install and link them, run:
yarn add react-native-reanimated react-native-gesture-handler
react-native link react-native-reanimated
react-native link react-native-gesture-handler
IMPORTANT: There are additional steps required for react-native-gesture-handler on Android after running react-native link react-native-gesture-handler. Check the this guide to complete the installation.
Usage
The package exports two different navigators:
createBottomTabNavigator: iOS like bottom tabs.createMaterialTopTabNavigator: Material design themed top tabs with swipe gesture, from react-native-tab-view.
You can import individual navigators and use them:
import { createBottomTabNavigator } from 'react-navigation-tabs';
export default createBottomTabNavigator({
Album: { screen: Album },
Library: { screen: Library },
History: { screen: History },
Cart: { screen: Cart },
});
You can install another package, react-navigation-material-bottom-tabs, to use a third type of tab navigator:
createMaterialBottomTabNavigator: Material design themed animated bottom tabs, from react-native-paper.
import { createMaterialBottomTabNavigator } from 'react-navigation-material-bottom-tabs';
export default createMaterialBottomTabNavigator({
Album: { screen: Album },
Library: { screen: Library },
History: { screen: History },
Cart: { screen: Cart },
}, {
initialRouteName: 'Album',
activeTintColor: '#F44336',
});