react-navigation-tabs

Tab Navigation components for React Navigation

MIT 82 个版本

react-native-component react-component react-native ios android tab swipe scrollable coverflow

主页

仓库

提交 Issue

安装

npm install react-navigation-tabs

yarn add react-navigation-tabs

pnpm add react-navigation-tabs

bun add react-navigation-tabs

README

Tab navigators for React Navigation.

Installation

Follow the instructions on the the React Navigation "Getting Started" guide, and then add the react-navigation-tabs package to your project.

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',
  },
);

Development workflow

To setup the development environment, open a Terminal in the repo directory and run the following:

yarn bootstrap

While developing, you can run the example app with Expo to test your changes:

yarn example start

Make sure your code passes TypeScript and ESLint. Run the following to verify:

yarn typescript
yarn lint

To fix formatting errors, run the following:

yarn lint --fix

Docs

版本列表

2.11.2 2022-02-02

2.11.1 2021-04-24

2.11.0 2021-02-21

2.10.1 2020-10-28

2.10.0 2020-10-26

2.9.2 2020-10-02

2.9.1 2020-09-24

2.9.0 2020-06-25

2.8.13 2020-04-30

2.8.12 2020-04-22

2.8.11 2020-04-02

2.8.10 2020-03-31

2.8.9 2020-03-28

2.8.8 2020-03-27

2.8.7 2020-03-22

2.8.6 2020-03-20

2.8.5 2020-03-19

2.8.4 2020-03-16

2.8.3 2020-03-16

2.8.2 2020-02-26

2.8.1 2020-02-24

2.8.0 2020-02-24

2.7.0 2020-01-05

2.6.2 2019-12-03

2.6.1 2019-12-03

2.6.0 2019-11-20

2.5.6 2019-10-09

2.5.5 2019-09-21

2.5.4 2019-09-19

2.5.3 2019-09-17

2.5.2 2019-09-13

2.5.1 2019-09-12

2.5.0 2019-09-12

2.4.2 2019-09-11

2.4.1 2019-09-09

2.4.0 2019-09-04

2.3.0 2019-07-25

2.2.0 2019-06-21

2.1.3 2019-05-20

2.1.2 2019-04-23

2.1.1 2019-04-10

2.1.0 2019-04-01

2.0.0-alpha.0 2019-03-06

2.0.0 2019-04-01

1.2.0-alpha.0 2019-08-13

1.2.0 2019-08-23

1.1.4 2019-05-17

1.1.3 2019-05-14

1.1.2 2019-04-10

1.1.1 2019-04-10

1.1.0 2019-04-01

1.0.2 2018-12-19

1.0.1 2018-11-30

1.0.0-alpha.5 2018-10-31

1.0.0-alpha.4 2018-10-23

1.0.0-alpha.3 2018-10-17

1.0.0-alpha.2 2018-10-15

1.0.0-alpha.1 2018-10-15

1.0.0 2018-11-17

0.8.4 2018-10-10

0.8.3 2018-10-10

0.8.2 2018-09-19

0.8.1 2018-09-19

0.8.0 2018-09-19

0.7.0 2018-09-06

0.6.0 2018-08-02

0.5.1 2018-06-06

0.5.0 2018-06-05

0.4.1 2018-06-05

0.4.0 2018-06-05

0.3.0 2018-05-24

0.2.0-rc.0 2018-05-04

0.2.0 2018-05-04

0.1.0-alpha.8 2018-05-01

0.1.0-alpha.7 2018-04-25

0.1.0-alpha.6 2018-04-05

0.1.0-alpha.5 2018-04-05

0.1.0-alpha.4 2018-04-02

0.1.0-alpha.3 2018-03-23

0.1.0-alpha.2 2018-03-23

0.1.0-alpha.1 2018-03-19

0.1.0-alpha.0 2018-03-17