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

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

var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});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 _=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 BasicCarouselExample=function(_React$Component){(0,_inherits2["default"])(BasicCarouselExample,_React$Component);var _super=_createSuper(BasicCarouselExample);function BasicCarouselExample(props){var _this;(0,_classCallCheck2["default"])(this,BasicCarouselExample);_this=_super.call(this,props);_this.onHorizontalSelectedIndexChange=function(index){console.log('horizontal change to',index);_this.setState({selectedIndex:index});};_this.state={selectedIndex:2,autoplay:true};return _this;}(0,_createClass2["default"])(BasicCarouselExample,[{key:"onVerticalSelectedIndexChange",value:function onVerticalSelectedIndexChange(index){console.log('vertical change to',index);}},{key:"render",value:function render(){var _this2=this;return _react["default"].createElement(_reactNative.View,{style:{marginTop:30}},_react["default"].createElement(_reactNative.View,{style:{paddingHorizontal:15}},_react["default"].createElement(_reactNative.Text,null,"horizontal"),_react["default"].createElement(_.Carousel,{style:styles.wrapper,selectedIndex:this.state.selectedIndex,autoplay:true,infinite:true,afterChange:this.onHorizontalSelectedIndexChange,ref:function ref(_ref){return _this2.carousel=_ref;}},_react["default"].createElement(_reactNative.View,{style:[styles.containerHorizontal,{backgroundColor:'red'}]},_react["default"].createElement(_reactNative.Text,null,"Carousel 1")),_react["default"].createElement(_reactNative.View,{style:[styles.containerHorizontal,{backgroundColor:'blue'}]},_react["default"].createElement(_reactNative.Text,null,"Carousel 2")),_react["default"].createElement(_reactNative.View,{style:[styles.containerHorizontal,{backgroundColor:'yellow'}]},_react["default"].createElement(_reactNative.Text,null,"Carousel 3")),_react["default"].createElement(_reactNative.View,{style:[styles.containerHorizontal,{backgroundColor:'aqua'}]},_react["default"].createElement(_reactNative.Text,null,"Carousel 4")),_react["default"].createElement(_reactNative.View,{style:[styles.containerHorizontal,{backgroundColor:'fuchsia'}]},_react["default"].createElement(_reactNative.Text,null,"Carousel 5"))),_react["default"].createElement(_.Button,{onPress:function onPress(){return _this2.carousel&&_this2.carousel.goTo(0);}},"Go to 0")),_react["default"].createElement(_reactNative.View,{style:{paddingHorizontal:15}},_react["default"].createElement(_reactNative.Text,null,"vertical"),_react["default"].createElement(_.Carousel,{style:styles.wrapper,selectedIndex:1,autoplay:this.state.autoplay,infinite:true,afterChange:this.onVerticalSelectedIndexChange,vertical:true},_react["default"].createElement(_reactNative.View,{style:[styles.containerVertical,{backgroundColor:'red'}]},_react["default"].createElement(_reactNative.Text,null,"Carousel 1")),_react["default"].createElement(_reactNative.View,{style:[styles.containerVertical,{backgroundColor:'blue'}]},_react["default"].createElement(_reactNative.Text,null,"Carousel 2")),_react["default"].createElement(_reactNative.View,{style:[styles.containerVertical,{backgroundColor:'yellow'}]},_react["default"].createElement(_reactNative.Text,null,"Carousel 3")),_react["default"].createElement(_reactNative.View,{style:[styles.containerVertical,{backgroundColor:'aqua'}]},_react["default"].createElement(_reactNative.Text,null,"Carousel 4")),_react["default"].createElement(_reactNative.View,{style:[styles.containerVertical,{backgroundColor:'fuchsia'}]},_react["default"].createElement(_reactNative.Text,null,"Carousel 5"))),_react["default"].createElement(_.Button,{onPress:function onPress(){return _this2.setState({autoplay:!_this2.state.autoplay});}},"Toggle autoplay ".concat(this.state.autoplay?'true':'false'))));}}]);return BasicCarouselExample;}(_react["default"].Component);exports["default"]=BasicCarouselExample;var styles=_reactNative.StyleSheet.create({wrapper:{backgroundColor:'#fff',width:'100%',height:150},containerHorizontal:{flexGrow:1,alignItems:'center',justifyContent:'center',height:150},containerVertical:{flexGrow:1,alignItems:'center',justifyContent:'center',height:150},text:{color:'#fff',fontSize:36}});