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

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

var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports.description=exports.title=exports["default"]=void 0;var _classCallCheck2=_interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));var _createClass2=_interopRequireDefault(require("@babel/runtime/helpers/createClass"));var _inherits2=_interopRequireDefault(require("@babel/runtime/helpers/inherits"));var _possibleConstructorReturn2=_interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));var _getPrototypeOf2=_interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));var _react=_interopRequireDefault(require("react"));var _reactNative=require("react-native");var _=_interopRequireDefault(require(".."));function _createSuper(Derived){var hasNativeReflectConstruct=_isNativeReflectConstruct();return function _createSuperInternal(){var Super=(0,_getPrototypeOf2["default"])(Derived),result;if(hasNativeReflectConstruct){var NewTarget=(0,_getPrototypeOf2["default"])(this).constructor;result=Reflect.construct(Super,arguments,NewTarget);}else{result=Super.apply(this,arguments);}return(0,_possibleConstructorReturn2["default"])(this,result);};}function _isNativeReflectConstruct(){if(typeof Reflect==="undefined"||!Reflect.construct)return false;if(Reflect.construct.sham)return false;if(typeof Proxy==="function")return true;try{Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],function(){}));return true;}catch(e){return false;}}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["default"].createElement(_reactNative.View,{key:"".concat(index,"_").concat(i),style:style},_react["default"].createElement(_reactNative.Text,null,tab.title," - ",i));});return _react["default"].createElement(_reactNative.ScrollView,{key:index,style:{backgroundColor:'#fff'}},content);};var BasicTabsExample=function(_React$Component){(0,_inherits2["default"])(BasicTabsExample,_React$Component);var _super=_createSuper(BasicTabsExample);function BasicTabsExample(){(0,_classCallCheck2["default"])(this,BasicTabsExample);return _super.apply(this,arguments);}(0,_createClass2["default"])(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["default"].createElement(_reactNative.View,{style:{flex:1}},_react["default"].createElement(_["default"],{tabs:tabs},_react["default"].createElement(_reactNative.View,{style:style},_react["default"].createElement(_reactNative.Text,null,"Content of First Tab")),_react["default"].createElement(_reactNative.View,{style:style},_react["default"].createElement(_reactNative.Text,null,"Content of Second Tab")),_react["default"].createElement(_reactNative.View,{style:style},_react["default"].createElement(_reactNative.Text,null,"Content of Third Tab"))),_react["default"].createElement(_reactNative.Text,{style:{margin:16}},"Custom RenderTabBar"),_react["default"].createElement(_["default"],{tabs:tabs,renderTabBar:function renderTabBar(tabProps){return _react["default"].createElement(_reactNative.View,{style:{paddingHorizontal:16,flexDirection:'row',alignItems:'center',justifyContent:'space-evenly'}},tabProps.tabs.map(function(tab,i){return _react["default"].createElement(_reactNative.TouchableOpacity,{activeOpacity:0.9,key:tab.key||i,style:{padding:6},onPress:function onPress(){var goToTab=tabProps.goToTab,onTabClick=tabProps.onTabClick;onTabClick&&onTabClick(tabs[i],i);goToTab&&goToTab(i);}},_react["default"].createElement(_reactNative.Text,{style:{color:tabProps.activeTab===i?'green':'#333333'}},tab.title));}));}},_react["default"].createElement(_reactNative.View,{style:style},_react["default"].createElement(_reactNative.Text,null,"Content of First Tab")),_react["default"].createElement(_reactNative.View,{style:style},_react["default"].createElement(_reactNative.Text,null,"Content of Second Tab")),_react["default"].createElement(_reactNative.View,{style:style},_react["default"].createElement(_reactNative.Text,null,"Content of Third Tab"))),_react["default"].createElement(_reactNative.View,{style:{flex:2}},_react["default"].createElement(_["default"],{tabs:tabs2,initialPage:1,tabBarPosition:"top"},tabs2.map(function(tab,index){return renderContent(tab,index);}))));}}]);return BasicTabsExample;}(_react["default"].Component);exports["default"]=BasicTabsExample;var title='Tabs';exports.title=title;var description='Tabs example';exports.description=description;