|
@ -1,22 +1,26 @@ |
|
|
import React, { useRef, useState } from "react"; |
|
|
import React, { useRef, useState } from "react"; |
|
|
import { StyleSheet, Text, TouchableOpacity, View, Animated, TouchableWithoutFeedback } from "react-native"; |
|
|
|
|
|
|
|
|
import { |
|
|
|
|
|
StyleSheet, |
|
|
|
|
|
Text, |
|
|
|
|
|
TouchableOpacity, |
|
|
|
|
|
View, |
|
|
|
|
|
Animated, |
|
|
|
|
|
TouchableWithoutFeedback, |
|
|
|
|
|
} from "react-native"; |
|
|
|
|
|
|
|
|
import colors from "../config/colors"; |
|
|
import colors from "../config/colors"; |
|
|
import ActionButton from 'react-native-action-button'; |
|
|
|
|
|
|
|
|
import ActionButton from "react-native-action-button"; |
|
|
import { AntDesign, Entypo } from "@expo/vector-icons"; |
|
|
import { AntDesign, Entypo } from "@expo/vector-icons"; |
|
|
import { Colors } from "react-native/Libraries/NewAppScreen"; |
|
|
import { Colors } from "react-native/Libraries/NewAppScreen"; |
|
|
import { FlatList } from "react-native-gesture-handler"; |
|
|
import { FlatList } from "react-native-gesture-handler"; |
|
|
import { Fontisto } from '@expo/vector-icons'; |
|
|
|
|
|
|
|
|
import { Fontisto } from "@expo/vector-icons"; |
|
|
import DataMenu from "./DataMenu"; |
|
|
import DataMenu from "./DataMenu"; |
|
|
import { MaterialCommunityIcons } from '@expo/vector-icons'; |
|
|
|
|
|
|
|
|
import { MaterialCommunityIcons } from "@expo/vector-icons"; |
|
|
|
|
|
|
|
|
import { Dimensions } from "react-native"; |
|
|
import { Dimensions } from "react-native"; |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const screenWidth = Dimensions.get("window").width; |
|
|
const screenWidth = Dimensions.get("window").width; |
|
|
const screenHeight = Dimensions.get('window').height; |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const screenHeight = Dimensions.get("window").height; |
|
|
|
|
|
|
|
|
function FloatButton(props) { |
|
|
function FloatButton(props) { |
|
|
const animation = useRef(new Animated.Value(0)).current; |
|
|
const animation = useRef(new Animated.Value(0)).current; |
|
@ -28,7 +32,7 @@ function FloatButton(props) { |
|
|
Animated.spring(animation, { |
|
|
Animated.spring(animation, { |
|
|
toValue: value, |
|
|
toValue: value, |
|
|
friction: 6, |
|
|
friction: 6, |
|
|
useNativeDriver: true |
|
|
|
|
|
|
|
|
useNativeDriver: true, |
|
|
}).start(); |
|
|
}).start(); |
|
|
|
|
|
|
|
|
setOpen(!open); |
|
|
setOpen(!open); |
|
@ -39,10 +43,9 @@ function FloatButton(props) { |
|
|
rotate: animation.interpolate({ |
|
|
rotate: animation.interpolate({ |
|
|
inputRange: [0, 1], |
|
|
inputRange: [0, 1], |
|
|
outputRange: ["0deg", "0deg"], |
|
|
outputRange: ["0deg", "0deg"], |
|
|
|
|
|
|
|
|
}) |
|
|
|
|
|
} |
|
|
|
|
|
] |
|
|
|
|
|
|
|
|
}), |
|
|
|
|
|
}, |
|
|
|
|
|
], |
|
|
}; |
|
|
}; |
|
|
|
|
|
|
|
|
const cameraStyle = { |
|
|
const cameraStyle = { |
|
@ -51,11 +54,11 @@ function FloatButton(props) { |
|
|
{ |
|
|
{ |
|
|
translateX: animation.interpolate({ |
|
|
translateX: animation.interpolate({ |
|
|
inputRange: [0, 1], |
|
|
inputRange: [0, 1], |
|
|
outputRange: [0, 20] |
|
|
|
|
|
}) |
|
|
|
|
|
} |
|
|
|
|
|
] |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
outputRange: [0, 20], |
|
|
|
|
|
}), |
|
|
|
|
|
}, |
|
|
|
|
|
], |
|
|
|
|
|
}; |
|
|
return ( |
|
|
return ( |
|
|
<View style={[styles.container]}> |
|
|
<View style={[styles.container]}> |
|
|
<TouchableWithoutFeedback> |
|
|
<TouchableWithoutFeedback> |
|
@ -66,7 +69,11 @@ function FloatButton(props) { |
|
|
<View style={{ margin: 35, alignSelf: "flex-end" }}> |
|
|
<View style={{ margin: 35, alignSelf: "flex-end" }}> |
|
|
<TouchableWithoutFeedback onPress={toggleMenu}> |
|
|
<TouchableWithoutFeedback onPress={toggleMenu}> |
|
|
<Animated.View style={[styles.button, styles.menu, rotation]}> |
|
|
<Animated.View style={[styles.button, styles.menu, rotation]}> |
|
|
<MaterialCommunityIcons name="layers-plus" size={36} color={colors.white} /> |
|
|
|
|
|
|
|
|
<MaterialCommunityIcons |
|
|
|
|
|
name="layers-plus" |
|
|
|
|
|
size={36} |
|
|
|
|
|
color={colors.white} |
|
|
|
|
|
/> |
|
|
</Animated.View> |
|
|
</Animated.View> |
|
|
</TouchableWithoutFeedback> |
|
|
</TouchableWithoutFeedback> |
|
|
</View> |
|
|
</View> |
|
@ -78,10 +85,11 @@ const styles = StyleSheet.create({ |
|
|
container: { |
|
|
container: { |
|
|
alignItems: "center", |
|
|
alignItems: "center", |
|
|
position: "absolute", |
|
|
position: "absolute", |
|
|
|
|
|
bottom: 0, |
|
|
|
|
|
left: 0, |
|
|
flex: 1, |
|
|
flex: 1, |
|
|
}, |
|
|
}, |
|
|
button: { |
|
|
button: { |
|
|
// position: "absolute",
|
|
|
|
|
|
width: 50, |
|
|
width: 50, |
|
|
height: 50, |
|
|
height: 50, |
|
|
borderRadius: 6, |
|
|
borderRadius: 6, |
|
@ -97,13 +105,10 @@ const styles = StyleSheet.create({ |
|
|
backgroundColor: colors.primary, |
|
|
backgroundColor: colors.primary, |
|
|
}, |
|
|
}, |
|
|
submenu: { |
|
|
submenu: { |
|
|
// position:"relative",
|
|
|
|
|
|
width: screenWidth, |
|
|
width: screenWidth, |
|
|
height: screenHeight * 0.9, |
|
|
height: screenHeight * 0.9, |
|
|
flex: 1, |
|
|
flex: 1, |
|
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
}, |
|
|
}); |
|
|
}); |
|
|
|
|
|
|
|
|
export default FloatButton; |
|
|
export default FloatButton; |