一个taro适配Android、iOS、微信小程序、H5最佳实践项目的脚手架

# React Native Tab View [![Build Status][build-badge]][build] [![Version][version-badge]][package] [![MIT License][license-badge]][license] A cross-platform Tab View component for React Native. This is a JavaScript-only implementation of swipeable tab views. It's super customizable, allowing you to do things like coverflow. - [Run the example app to see it in action](https://expo.io/@satya164/react-native-tab-view-demos). - Checkout the [example/](https://github.com/react-native-community/react-native-tab-view/tree/master/example) folder for source code. ## Features - Smooth animations and gestures - Scrollable tabs - Supports both top and bottom tab bars - Follows Material Design spec - Highly customizable - Fully typed with [Flow](https://flow.org/) ## Demo <a href="https://raw.githubusercontent.com/satya164/react-native-tab-view/master/demo/demo.mp4"><img src="https://raw.githubusercontent.com/satya164/react-native-tab-view/master/demo/demo.gif" width="360"></a> ## Installation ```sh yarn add react-native-tab-view ``` ## Quick Start ```js import * as React from 'react'; import { View, StyleSheet, Dimensions } from 'react-native'; import { TabView, TabBar, SceneMap } from 'react-native-tab-view'; const FirstRoute = () => ( <View style={[styles.scene, { backgroundColor: '#ff4081' }]} /> ); const SecondRoute = () => ( <View style={[styles.scene, { backgroundColor: '#673ab7' }]} /> ); export default class TabViewExample extends React.Component { state = { index: 0, routes: [ { key: 'first', title: 'First' }, { key: 'second', title: 'Second' }, ], }; render() { return ( <TabView navigationState={this.state} renderScene={SceneMap({ first: FirstRoute, second: SecondRoute, })} onIndexChange={index => this.setState({ index })} initialLayout={{ width: Dimensions.get('window').width }} /> ); } } const styles = StyleSheet.create({ scene: { flex: 1, }, }); ``` [Try this example on Snack](https://snack.expo.io/@satya164/react-native-tab-view-quick-start) ## More examples on Snack - [Custom Tab Bar](https://snack.expo.io/@satya164/react-native-tab-view-custom-tabbar) - [Lazy Load](https://snack.expo.io/@satya164/react-native-tab-view-lazy-load) ## Integration with React Navigation React Navigation integration can be achieved by the [react-navigation-tabs](https://github.com/react-navigation/react-navigation-tabs) package. Note that while it's easier to use, it is not as flexible as using the library directly. ## API reference The package exports a `TabView` component which is the one you'd use to render the tab view, a `TabBar` component which is the default tab bar implementation, as well as several pager components for more fine-grained control. In a trivial app, you'd mostly only use `TabView` and `TabBar`. ### `<TabView />` Container component responsible for rendering and managing tabs. #### Example ```js <TabView navigationState={this.state} onIndexChange={index => this.setState({ index })} renderScene={SceneMap({ first: FirstRoute, second: SecondRoute, })} /> ``` #### Props - `navigationState` (required): the current navigation state, should contain a `routes` array containing the list of tabs, and an `index` property representing the current tab. - `onIndexChange` (required): callback for when the current tab index changes, should update the navigation state. - `renderScene` (required): callback which returns a React Element to use as the scene for a tab. - `renderTabBar`: callback which returns a custom React Element to use as the tab bar. - `renderPager`: callback which returns a custom React Element to handle swipe gesture and animation. - `canJumpToTab`: callback which returns a boolean indicating whether jumping to the tab is allowed. - `initialLayout`: object containing the initial `height` and `width`, can be passed to prevent the one frame delay in rendering. - `tabBarPosition`: position of the tab bar, `'top'` or `'bottom'`. Defaults to `'top'`. Any other props are passed to the underlying pager. ### `<TabBar />` Material design themed tab bar. To pass props to the tab bar, you'd need to use the `renderTabBar` prop of `TabView` to render the `TabBar` and pass additional props. #### Example ```js renderTabBar={props => <TabBar {...props} indicatorStyle={{ backgroundColor: 'pink' }} /> } ``` #### Props - `getLabelText`: callback which returns the label text to use for a tab. Defaults to uppercased route title. - `getAccessible`: callback which returns a boolean to indicate whether to mark a tab as `accessible`. Defaults to `true`. - `getAccessibilityLabel`: callback which returns an accessibility label for the tab. Defaults to route title. - `getTestID`: callback which returns a test id for the tab. - `renderIcon`: callback which returns a custom React Element to be used as a icon. - `renderLabel`: callback which returns a custom React Element to be used as a label. - `renderIndicator`: callback which returns a custom React Element to be used as a tab indicator. - `renderBadge`: callback which returns a custom React Element to be used as a badge. - `onTabPress`: callback invoked on tab press, useful for things like scroll to top. - `onTabLongPress`: callback invoked on tab long-press, for example to show a drawer with more options. - `pressColor`: color for material ripple (Android >= 5.0 only). - `pressOpacity`: opacity for pressed tab (iOS and Android < 5.0 only). - `scrollEnabled`: whether to enable scrollable tabs. - `bounces`: whether the tab bar bounces when scrolling. - `useNativeDriver`: whether to use native animations. - `tabStyle`: style object for the individual tabs in the tab bar. - `indicatorStyle`: style object for the active indicator. - `labelStyle`: style object for the tab item label. - `style`: style object for the tab bar. ### `<PagerPan />` Cross-platform pager based on the [`PanResponder`](https://facebook.github.io/react-native/docs/panresponder.html). #### Props - `animationEnabled`: whether to enable page change animation. - `swipeEnabled`: whether to enable swipe gestures. - `swipeDistanceThreshold`: minimum swipe distance to trigger page switch. - `swipeVelocityThreshold`: minimum swipe velocity to trigger page switch. - `onSwipeStart`: optional callback when a swipe gesture starts. - `onSwipeEnd`: optional callback when a swipe gesture ends. - `onAnimationEnd`: optional callback when the transition animation ends. - `getTestID`: optional callback which receives the current scene and returns a test id for the tab. - `children`: React Element(s) to render. ### `<PagerScroll />` Cross-platform pager based on [`ScrollView`](https://facebook.github.io/react-native/docs/scrollview.html) (default on iOS). #### Props - `animationEnabled`: whether to enable page change animation. - `swipeEnabled`: whether to enable swipe gestures. - `onSwipeStart`: optional callback when a swipe gesture starts. - `onSwipeEnd`: optional callback when a swipe gesture ends. - `onAnimationEnd`: optional callback when the transition animation ends. - `getTestID`: optional callback which receives the current scene and returns a test id for the tab. - `children`: React Element(s) to render. There are some caveats when using this pager on Android, such as poor support for intial index other than `0` and weird animation curves. ### `<PagerAndroid />` Android only pager based on `ViewPagerAndroid` (default on Android). #### Props - `animationEnabled`: whether to enable page change animation. - `swipeEnabled`: whether to enable swipe gestures. - `onSwipeStart`: optional callback when a swipe gesture starts. - `onSwipeEnd`: optional callback when a swipe gesture ends. - `onAnimationEnd`: optional callback when the transition animation ends. - `keyboardDismissMode`: whether the keyboard gets dismissed in response to a drag in [ViewPagerAndroid](https://face