@ant-design/react-native/es/tabs/demo/basic.js

基于蚂蚁金服移动设计规范的 React Native 组件库

import _classCallCheck from 'babel-runtime/helpers/classCallCheck';
import _createClass from 'babel-runtime/helpers/createClass';
import _possibleConstructorReturn from 'babel-runtime/helpers/possibleConstructorReturn';
import _inherits from 'babel-runtime/helpers/inherits';
/* tslint:disable:no-console */
import React from 'react';
import { ScrollView, Text, TouchableOpacity, View } from 'react-native';
import Tabs from '..';
var renderContent = function renderContent(tab, index) {
  var style = {
    paddingVertical: 40,
    justifyContent: 'center',
    alignItems: 'center',
    margin: 10,
    backgroundColor: '#ddd'
  };
  var content = [1, 2, 3, 4, 5, 6, 7, 8].map(function (i) {
    return React.createElement(
      View,
      { key: index + '_' + i, style: style },
      React.createElement(
        Text,
        null,
        tab.title,
        ' - ',
        i
      )
    );
  });
  return React.createElement(
    ScrollView,
    { style: { backgroundColor: '#fff' } },
    content
  );
};

var BasicTabsExample = function (_React$Component) {
  _inherits(BasicTabsExample, _React$Component);

  function BasicTabsExample() {
    _classCallCheck(this, BasicTabsExample);

    return _possibleConstructorReturn(this, (BasicTabsExample.__proto__ || Object.getPrototypeOf(BasicTabsExample)).apply(this, arguments));
  }

  _createClass(BasicTabsExample, [{
    key: 'render',
    value: function render() {
      var tabs = [{ title: 'First Tab' }, { title: 'Second Tab' }, { title: 'Third Tab' }];
      var tabs2 = [{ title: '1st Tab' }, { title: '2nd Tab' }, { title: '3rd Tab' }, { title: '4th Tab' }, { title: '5th Tab' }, { title: '6th Tab' }, { title: '7th Tab' }, { title: '8th Tab' }, { title: '9th Tab' }];
      var style = {
        alignItems: 'center',
        justifyContent: 'center',
        height: 150,
        backgroundColor: '#fff'
      };
      return React.createElement(
        View,
        { style: { flex: 1 } },
        React.createElement(
          Tabs,
          { tabs: tabs },
          React.createElement(
            View,
            { style: style },
            React.createElement(
              Text,
              null,
              'Content of First Tab'
            )
          ),
          React.createElement(
            View,
            { style: style },
            React.createElement(
              Text,
              null,
              'Content of Second Tab'
            )
          ),
          React.createElement(
            View,
            { style: style },
            React.createElement(
              Text,
              null,
              'Content of Third Tab'
            )
          )
        ),
        React.createElement(
          Text,
          { style: { margin: 16 } },
          'Custom RenderTabBar'
        ),
        React.createElement(
          Tabs,
          { tabs: tabs, renderTabBar: function renderTabBar(tabProps) {
              return React.createElement(
                View,
                { style: {
                    paddingHorizontal: 16,
                    flexDirection: 'row',
                    alignItems: 'center',
                    justifyContent: 'space-evenly'
                  } },
                tabProps.tabs.map(function (tab, i) {
                  return (
                    // change the style to fit your needs
                    React.createElement(
                      TouchableOpacity,
                      { activeOpacity: 0.9, key: tab.key || i, style: {
                          // width: '30%',
                          padding: 6
                        }, onPress: function onPress() {
                          var goToTab = tabProps.goToTab,
                              onTabClick = tabProps.onTabClick;
                          // tslint:disable-next-line:no-unused-expression

                          onTabClick && onTabClick(tabs[i], i);
                          // tslint:disable-next-line:no-unused-expression
                          goToTab && goToTab(i);
                        } },
                      React.createElement(
                        Text,
                        { style: {
                            color: tabProps.activeTab === i ? 'green' : undefined
                          } },
                        tab.title
                      )
                    )
                  );
                })
              );
            } },
          React.createElement(
            View,
            { style: style },
            React.createElement(
              Text,
              null,
              'Content of First Tab'
            )
          ),
          React.createElement(
            View,
            { style: style },
            React.createElement(
              Text,
              null,
              'Content of Second Tab'
            )
          ),
          React.createElement(
            View,
            { style: style },
            React.createElement(
              Text,
              null,
              'Content of Third Tab'
            )
          )
        ),
        React.createElement(
          View,
          { style: { flex: 2 } },
          React.createElement(
            Tabs,
            { tabs: tabs2, initialPage: 1, tabBarPosition: 'top' },
            renderContent
          )
        )
      );
    }
  }]);

  return BasicTabsExample;
}(React.Component);

export default BasicTabsExample;

export var title = 'Tabs';
export var description = 'Tabs example';