@ant-design/react-native/lib/flex/demo/basic.js

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

"use strict";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 Circle=function Circle(props){var size=props.size||20;var style={borderRadius:size/2,backgroundColor:'#527fe4',width:size,height:size,margin:1};return _react["default"].createElement(_reactNative.View,{style:style});};var FlexExample=function(_React$Component){(0,_inherits2["default"])(FlexExample,_React$Component);var _super=_createSuper(FlexExample);function FlexExample(){(0,_classCallCheck2["default"])(this,FlexExample);return _super.apply(this,arguments);}(0,_createClass2["default"])(FlexExample,[{key:"render",value:function render(){return _react["default"].createElement(_reactNative.ScrollView,{style:{flex:1},automaticallyAdjustContentInsets:false,showsHorizontalScrollIndicator:false,showsVerticalScrollIndicator:false},_react["default"].createElement(_.WingBlank,{style:{marginTop:20,marginBottom:5}},_react["default"].createElement(_reactNative.Text,{style:{marginBottom:10}},"\u9879\u76EE\u7684\u6392\u5217\u65B9\u5411"),_react["default"].createElement(_reactNative.Text,null,"direction=\"row\":\u4E3B\u8F74\u4E3A\u6C34\u5E73\u65B9\u5411\uFF0C\u8D77\u70B9\u5728\u5DE6\u7AEF")),_react["default"].createElement(_.WingBlank,{style:{marginBottom:5}},_react["default"].createElement(_.Flex,null,_react["default"].createElement(_.Flex.Item,{style:{paddingLeft:4,paddingRight:4}},_react["default"].createElement(_.Button,{size:"small"},"\u6309\u94AE1")),_react["default"].createElement(_.Flex.Item,{style:{paddingLeft:4,paddingRight:4}},_react["default"].createElement(_.Button,{size:"small"},"\u6309\u94AE2")),_react["default"].createElement(_.Flex.Item,{style:{paddingLeft:4,paddingRight:4}},_react["default"].createElement(_.Button,{size:"small"},"\u6309\u94AE3")))),_react["default"].createElement(_.WingBlank,{style:{marginTop:5,marginBottom:5}},_react["default"].createElement(_reactNative.Text,null,"direction=\"column\":\u4E3B\u8F74\u4E3A\u5782\u76F4\u65B9\u5411\uFF0C\u8D77\u70B9\u5728\u4E0A\u6CBF")),_react["default"].createElement(_.WingBlank,{style:{marginBottom:5}},_react["default"].createElement(_.Flex,{direction:"column"},_react["default"].createElement(_.Flex.Item,{style:{paddingBottom:4}},_react["default"].createElement(_.Button,{size:"small"},"\u6309\u94AE1")),_react["default"].createElement(_.Flex.Item,{style:{paddingBottom:4}},_react["default"].createElement(_.Button,{size:"small"},"\u6309\u94AE2")),_react["default"].createElement(_.Flex.Item,{style:{paddingBottom:4}},_react["default"].createElement(_.Button,{size:"small"},"\u6309\u94AE3")))),_react["default"].createElement(_.WingBlank,{style:{marginTop:5,marginBottom:5}},_react["default"].createElement(_reactNative.Text,{style:{marginTop:20,marginBottom:20}},"\u9879\u76EE\u5728\u4E3B\u8F74\u4E0A\u7684\u5BF9\u9F50\u65B9\u5F0F"),_react["default"].createElement(_reactNative.Text,null,"justify=\"start\":\u5DE6\u5BF9\u9F50")),_react["default"].createElement(_.WingBlank,{style:{marginBottom:5}},_react["default"].createElement(_.Flex,{justify:"start"},_react["default"].createElement(Circle,null),_react["default"].createElement(Circle,null),_react["default"].createElement(Circle,null),_react["default"].createElement(Circle,null),_react["default"].createElement(Circle,null))),_react["default"].createElement(_.WingBlank,{style:{marginTop:5,marginBottom:5}},_react["default"].createElement(_reactNative.Text,null,"justify=\"center\":\u5C45\u4E2D")),_react["default"].createElement(_.WingBlank,{style:{marginBottom:5}},_react["default"].createElement(_.Flex,{justify:"center"},_react["default"].createElement(Circle,null),_react["default"].createElement(Circle,null),_react["default"].createElement(Circle,null),_react["default"].createElement(Circle,null),_react["default"].createElement(Circle,null))),_react["default"].createElement(_.WingBlank,{style:{marginTop:5,marginBottom:5}},_react["default"].createElement(_reactNative.Text,null,"justify=\"end\":\u53F3\u5BF9\u9F50")),_react["default"].createElement(_.WingBlank,{style:{marginBottom:5}},_react["default"].createElement(_.Flex,{justify:"end"},_react["default"].createElement(Circle,null),_react["default"].createElement(Circle,null),_react["default"].createElement(Circle,null),_react["default"].createElement(Circle,null),_react["default"].createElement(Circle,null))),_react["default"].createElement(_.WingBlank,{style:{marginTop:5,marginBottom:5}},_react["default"].createElement(_reactNative.Text,null,"justify=\"between\":\u4E24\u7AEF\u5BF9\u9F50\uFF0C\u9879\u76EE\u4E4B\u95F4\u7684\u95F4\u9694\u90FD\u76F8\u7B49")),_react["default"].createElement(_.WingBlank,{style:{marginBottom:5}},_react["default"].createElement(_.Flex,{justify:"between"},_react["default"].createElement(Circle,null),_react["default"].createElement(Circle,null),_react["default"].createElement(Circle,null),_react["default"].createElement(Circle,null),_react["default"].createElement(Circle,null))),_react["default"].createElement(_.WingBlank,{style:{marginTop:5,marginBottom:5}},_react["default"].createElement(_reactNative.Text,null,"justify=\"around\":\u6BCF\u4E2A\u9879\u76EE\u4E24\u4FA7\u7684\u95F4\u9694\u76F8\u7B49")),_react["default"].createElement(_.WingBlank,{style:{marginBottom:5}},_react["default"].createElement(_.Flex,{justify:"around"},_react["default"].createElement(Circle,null),_react["default"].createElement(Circle,null),_react["default"].createElement(Circle,null),_react["default"].createElement(Circle,null),_react["default"].createElement(Circle,null))),_react["default"].createElement(_.WingBlank,{style:{marginTop:5,marginBottom:5}},_react["default"].createElement(_reactNative.Text,{style:{marginTop:20,marginBottom:20}},"\u9879\u76EE\u5728\u4EA4\u53C9\u8F74\u4E0A\u7684\u5BF9\u9F50\u65B9\u5F0F"),_react["default"].createElement(_reactNative.Text,null,"align=\"start\":\u4EA4\u53C9\u8F74\u7684\u8D77\u70B9\u5BF9\u9F50")),_react["default"].createElement(_.WingBlank,{style:{marginBottom:5}},_react["default"].createElement(_.Flex,{align:"start",style:{height:30}},_react["default"].createElement(_reactNative.Text,{style:{fontSize:20,borderWidth:1,borderStyle:'solid',borderColor:'#527fe4'}},"\u515C\u515C"),_react["default"].createElement(_reactNative.Text,{style:{fontSize:18,borderWidth:1,borderStyle:'solid',borderColor:'#527fe4'}},"\u515C\u515C"),_react["default"].createElement(_reactNative.Text,{style:{fontSize:16,borderWidth:1,borderStyle:'solid',borderColor:'#527fe4'}},"\u515C\u515C"),_react["default"].createElement(_reactNative.Text,{style:{fontSize:14,borderWidth:1,borderStyle:'solid',borderColor:'#527fe4'}},"\u515C\u515C"))),_react["default"].createElement(_.WingBlank,{style:{marginTop:5,marginBottom:5}},_react["default"].createElement(_reactNative.Text,null,"align=\"center\":\u4EA4\u53C9\u8F74\u7684\u4E2D\u70B9\u5BF9\u9F50")),_react["default"].createElement(_.WingBlank,{style:{marginBottom:5}},_react["default"].createElement(_.Flex,{align:"center",style:{height:30}},_react["default"].createElement(_reactNative.Text,{style:{fontSize:20,borderWidth:1,borderStyle:'solid',borderColor:'#527fe4'}},"\u515C\u515C"),_react["default"].createElement(_reactNative.Text,{style:{fontSize:18,borderWidth:1,borderStyle:'solid',borderColor:'#527fe4'}},"\u515C\u515C"),_react["default"].createElement(_reactNative.Text,{style:{fontSize:16,borderWidth:1,borderStyle:'solid',borderColor:'#527fe4'}},"\u515C\u515C"),_react["default"].createElement(_reactNative.Text,{style:{fontSize:14,borderWidth:1,borderStyle:'solid',borderColor:'#527fe4'}},"\u515C\u515C"))),_react["default"].createElement(_.WingBlank,{style:{marginTop:5,marginBottom:5}},_react["default"].createElement(_reactNative.Text,null,"align=\"end\":\u4EA4\u53C9\u8F74\u7684\u7EC8\u70B9\u5BF9\u9F50")),_react["default"].createElement(_.WingBlank,{style:{marginBottom:5}},_react["default"].createElement(_.Flex,{align:"end",style:{height:30}},_react["default"].createElement(_reactNative.Text,{style:{fontSize:20,borderWidth:1,borderStyle:'solid',borderColor:'#527fe4'}},"\u515C\u515C"),_react["default"].createElement(_reactNative.Text,{style:{fontSize:18,borderWidth:1,borderStyle:'solid',borderColor:'#527fe4'}},"\u515C\u515C"),_react["default"].createElement(_reactNative.Text,{style:{fontSize:16,borderWidth:1,borderStyle:'solid',borderColor:'#527fe4'}},"\u515C\u515C"),_react["default"].createElement(_reactNative.Text,{style:{fontSize:14,borderWidth:1,borderStyle:'solid',borderColor:'#527fe4'}},"\u515C\u515C"))),_react["default"].createElement(_.WingBlank,{style:{marginTop:5,marginBottom:5}},_react["default"].createElement(_reactNative.Text,null,"align=\"stretch\":\u5982\u679C\u9879\u76EE\u672A\u8BBE\u7F6E\u9AD8\u5EA6\u6216\u8BBE\u4E3Aauto\uFF0C\u5C06\u5360\u6EE1\u6574\u4E2A\u5BB9\u5668\u7684\u9AD8\u5EA6")),_react["default"].createElement(_.WingBlank,{style:{marginBottom:5}},_react["default"].createElement(_.WingBlank,null,_react["default"].createElement(_.Flex,{align:"stretch",style:{height:70}},_react["default"].createElement(_reactNative.Text,{style:{fontSize:20,borderWidth:1,borderStyle:'solid',borderColor:'#527fe4'}},"\u515C\u515C"),_react["default"].createElement(_reactNative.Text,{style:{fontSize:18,borderWidth:1,borderStyle:'solid',borderColor:'#527fe4'}},"\u515C\u515C"),_react["default"].createElement(_reactNative.Text,{style:{fontSize:16,borderWidth:1,borderStyle:'solid',borderColor:'#527fe4'}},"\u515C\u515C"),_react["default"].createElement(_reactNative.Text,{style:{fontSize:14,borderWidth:1,borderStyle:'solid',borderColor:'#527fe4'}},"\u515C\u515C")))),_react["default"].createElement(_.WingBlank,{style:{marginTop:5,marginBottom:5}},_react["default"].createElement(_reactNative.Text,{style:{marginBottom:10}},"\u662F\u5426\u6298\u884C"),_react["default"].createElement(_reactNative.Text,null,"wrap=\"wrap\":\u6362\u884C")),_react["default"].createElement(_.WingBlank,{style:{marginBottom:5}},_react["default"].createElement(_reactNative.TouchableWithoutFeedback,{onPress:function onPress(){return{};}},_react["default"].createElement(_.Flex,{wrap:"wrap"},'ooooooooooooooooooooooooooooo'.split('').map(function(char,i){return _react["default"].createElement(Circle,{key:"".concat(i,"-").concat(char)});})))),_react["default"].createElement(_.WingBlank,{style:{marginTop:5,marginBottom:5}},_react["default"].createElement(_reactNative.Text,null,"wrap=\"nowrap\":\u4E0D\u6362\u884C")),_react["default"].createElement(_.WingBlank,{style:{marginBottom:5}},_react["default"].createElement(_.Flex,{wrap:"nowrap",onPress:function onPress(){return{};}},'ooooooooooooooooooooooooooooo'.split('').map(function(char,i){return _react["default"].createElement(Circle,{key:"".concat(i,"-").concat(char)});}))),_react["default"].createElement(_.WhiteSpace,null),_react["default"].createElement(_.WhiteSpace,null),_react["default"].createElement(_.WhiteSpace,null));}}]);return FlexExample;}(_react["default"].Component);exports["default"]=FlexExample;