react-native-smart-parabola
A smart parabola for react-native apps. It is usually used for shopping cart. Written in JS for cross-platform support. It works on iOS and Android.
This component is compatible with React Native 0.25 and newer.
Preview
Installation
npm install react-native-smart-parabola --save
Full Demo
Usage
Install the button from npm with npm install react-native-smart-parabola --save
.
Then, require it from your app's JavaScript files with import Parabola from 'react-native-smart-parabola'
.
let width: deviceWidth height: deviceHeight = Dimensionslet contentTop = PlatformOS == 'ios' ? 64 : 56 // 构造 { superprops // 初始状态 thisstate = isTrigger: false start: null end: null this_startPositions = {} this_endPositions = {} } { return //to get the page origin (0, 0), container need not to be set margin, padding and border <View style=flex: 1> <View style=marginTop: contentTop flex: 1 > <Button onLayout= this_onLayout1 onPress=this_onPressHandler_1 touchableType='blur' style=position: 'absolute' left: 10 top: 10 justifyContent: 'center' width: 20 height: 20 backgroundColor: 'red' borderRadius: 10 justifyContent: 'center' textStyle=position: 'relative' bottom: 1 fontSize: 17 color: 'white' > + </Button> <Button onLayout= this_onLayout1 onPress=this_onPressHandler_1 touchableType='blur' style=position: 'absolute' left: 10 top: 210 justifyContent: 'center' width: 20 height: 20 backgroundColor: 'red' borderRadius: 10 justifyContent: 'center' textStyle=position: 'relative' bottom: 1 fontSize: 17 color: 'white' > + </Button> <Button onLayout= this_onLayout1 onPress=this_onPressHandler_1 touchableType='blur' style=position: 'absolute' left: 10 top: 410 justifyContent: 'center' width: 20 height: 20 backgroundColor: 'red' borderRadius: 10 justifyContent: 'center' textStyle=position: 'relative' bottom: 1 fontSize: 17 color: 'white' > + </Button> <Button onLayout= this_onLayout1 onPress=this_onPressHandler_1 touchableType='blur' style=position: 'absolute' left: 10 top: deviceHeight - 160 justifyContent: 'center' width: 20 height: 20 backgroundColor: 'red' borderRadius: 10 justifyContent: 'center' textStyle=position: 'relative' bottom: 1 fontSize: 17 color: 'white' > + </Button> <Button onLayout= this_onLayout2 onPress=this_onPressHandler_2 touchableType='blur' style=position: 'absolute' right: 10 top: 10 justifyContent: 'center' width: 20 height: 20 backgroundColor: '#00AAEF' borderRadius: 10 justifyContent: 'center' textStyle=position: 'relative' bottom: 1 fontSize: 17 color: 'white' > + </Button> <Button onLayout= this_onLayout2 onPress=this_onPressHandler_2 touchableType='blur' style=position: 'absolute' right: 10 top: 210 justifyContent: 'center' width: 20 height: 20 backgroundColor: '#00AAEF' borderRadius: 10 justifyContent: 'center' textStyle=position: 'relative' bottom: 1 fontSize: 17 color: 'white' > + </Button> <Button onLayout= this_onLayout2 onPress=this_onPressHandler_2 touchableType='blur' style=position: 'absolute' right: 10 top: 410 justifyContent: 'center' width: 20 height: 20 backgroundColor: '#00AAEF' borderRadius: 10 justifyContent: 'center' textStyle=position: 'relative' bottom: 1 fontSize: 17 color: 'white' > + </Button> <Button onLayout= this_onLayout2 onPress=this_onPressHandler_2 touchableType='blur' style=position: 'absolute' right: 10 top: deviceHeight - 150 justifyContent: 'center' width: 20 height: 20 backgroundColor: '#00AAEF' borderRadius: 10 justifyContent: 'center' textStyle=position: 'relative' bottom: 1 fontSize: 17 color: 'white' > + </Button> </View> <View onLayout=this_onLayoutCart1 style=opacity: 1 backgroundColor: 'red' borderRadius: 15 position: 'absolute' width: 30 height: 30 right: 0 bottom: 0 justifyContent: 'center' alignItems: 'center' > <Image source=image_cart style=width: 15 height: 15/> </View> <View onLayout=this_onLayoutCart2 style=opacity: 1 backgroundColor: '#00AAEF' borderRadius: 15 position: 'absolute' width: 30 height: 30 left: 0 bottom: 0 justifyContent: 'center' alignItems: 'center' > <Image source=image_cart style=width: 15 height: 15/> </View> <Parabola isTrigger=thisstateisTrigger rate=09 start=thisstatestart end=thisstateend renderParabola=this_renderParabola /> </View> //Parabola need to be contained by root container } { let x y = enativeEventlayout console this_startPositions key = start: x y: y + contentTop //end: { // x: deviceWidth - 5, // y: deviceHeight - 20 - 5 //}, } { let x y = enativeEventlayout console this_startPositions key = start: x y: y + contentTop //end: { // x: 5, // y: deviceHeight - 20 - 5 //}, } { let x y = enativeEventlayout this_endPositions 'cart-1' = x: x + 5 y: y + 5 } { let x y = enativeEventlayout this_endPositions 'cart-2' = x: x + 5 y: y + 5 } { let startPositions = this_startPositions key startPositionsend = this_endPositions 'cart-1' let start end = startPositions this } { let startPositions = this_startPositions key startPositionsend = this_endPositions 'cart-2' let start end = startPositions this } { return <View key=`'parabola-ball-'` style= position: 'absolute' //Don't forget to set this width: 20 height: 20 borderRadius: 10 backgroundColor: 'red' transform: translateX translateY /> }
Props
Prop | Type | Optional | Default | Description |
---|---|---|---|---|
isTrigger | bool | No | If the value is true, a new parabola view will be rendered | |
rate | number | Yes | 1 | determine the value which can change the parabola trajectory |
duration | number | Yes | 500 | determine the parabola animation duration |
top | number | Yes | 0 | determine the extra offset of axis y |
start | object | No | determine the start coordinate (pageX, pageY) | |
end | object | No | determine the end coordinate (pageX, pageY) | |
renderParabola | func | No | determine the parabola view |