新增myslider
This commit is contained in:
al
parent
6cca0f29ac
commit
b8e7a67ee8
|
|
@ -0,0 +1,195 @@
|
|||
import {
|
||||
View,
|
||||
Text,
|
||||
TouchableOpacity,
|
||||
Modal,
|
||||
PanResponder,
|
||||
Dimensions,
|
||||
} from "react-native";
|
||||
import React, { useState, useEffect, useRef } from "react";
|
||||
import { useTailwind } from "tailwind-rn";
|
||||
import { Image } from "expo-image";
|
||||
export default function MySlider({
|
||||
min,
|
||||
max,
|
||||
step,
|
||||
height = 60,
|
||||
width = Dimensions.get("window").width,
|
||||
onChange = () => {},
|
||||
onAfterChange = () => {},
|
||||
defaultValue = 0,
|
||||
disabled = false,
|
||||
thumbSize = 30,
|
||||
leftValue = 20,
|
||||
rightValue = 80,
|
||||
thumbImage = null,
|
||||
maximumTrackTintColor = "#dcdbdb",
|
||||
minimumTrackTintColor = "#577BFF",
|
||||
processHeight = 7,
|
||||
}) {
|
||||
const leftProcess = useRef(0);
|
||||
const rightProcess = useRef(0);
|
||||
const [processWidth, setProcessWidth] = useState(330);
|
||||
const tailwind = useTailwind();
|
||||
const leftWatcher = useRef(null);
|
||||
const rightWatcher = useRef(null);
|
||||
useEffect(() => {
|
||||
leftWatcher.current = PanResponder.create({
|
||||
// 建立监视器
|
||||
onStartShouldSetPanResponder: () => true,
|
||||
onPanResponderGrant: _onPanResponderGrantLeft, // 按下
|
||||
onPanResponderMove: _onPanResponderMoveLeft, // 移动
|
||||
onPanResponderEnd: _onPanResponderEndLeft, // 结束
|
||||
});
|
||||
rightWatcher.current = PanResponder.create({
|
||||
// 建立监视器
|
||||
onStartShouldSetPanResponder: () => true,
|
||||
onPanResponderGrant: _onPanResponderGrantRight, // 按下
|
||||
onPanResponderMove: _onPanResponderMoveRight, // 移动
|
||||
onPanResponderEnd: _onPanResponderEndRight, // 结束
|
||||
});
|
||||
const currentLeftProcess = leftValue / (max - min);
|
||||
const currentRightProcess = rightValue / (max - min);
|
||||
leftProcess.current = currentLeftProcess;
|
||||
rightProcess.current = currentRightProcess;
|
||||
// setRightProcess(rightProcess);
|
||||
setProcessWidth(width - thumbSize);
|
||||
console.log("rightProcess", rightProcess.current);
|
||||
}, []);
|
||||
|
||||
// 左侧滑块事件
|
||||
const _onPanResponderGrantLeft = (e, gestureState) => {
|
||||
const process = (gestureState.x0 - thumbSize / 2) / processWidth;
|
||||
_changeProcess(process, "left");
|
||||
};
|
||||
|
||||
const _onPanResponderEndLeft = (e, gestureState) => {
|
||||
if (onAfterChange) {
|
||||
onAfterChange(gestureState.x0);
|
||||
}
|
||||
};
|
||||
const _onPanResponderMoveLeft = (e, gestureState) => {
|
||||
const process =
|
||||
(gestureState.x0 - thumbSize / 2 + gestureState.dx) / processWidth;
|
||||
_changeProcess(process, "left");
|
||||
};
|
||||
|
||||
// 右侧滑块事件
|
||||
const _onPanResponderGrantRight = (e, gestureState) => {
|
||||
const process = (gestureState.x0 - thumbSize / 2) / processWidth;
|
||||
_changeProcess(process, "right");
|
||||
};
|
||||
|
||||
const _onPanResponderEndRight = (e, gestureState) => {
|
||||
if (onAfterChange) {
|
||||
onAfterChange(gestureState.x0);
|
||||
}
|
||||
};
|
||||
const _onPanResponderMoveRight = (e, gestureState) => {
|
||||
const process =
|
||||
(gestureState.x0 - thumbSize / 2 + gestureState.dx) / processWidth;
|
||||
_changeProcess(process, "right");
|
||||
// console.log("process", processWidth);
|
||||
};
|
||||
const _changeProcess = (changeProcess, direction) => {
|
||||
// 判断滑动开关
|
||||
if (disabled) return;
|
||||
if (changeProcess >= 0 && changeProcess <= 1) {
|
||||
onChange(changeProcess);
|
||||
|
||||
// 按步长比例变化刻度
|
||||
const v = changeProcess * (max - min);
|
||||
const newValue = Math.round(v / step) * step;
|
||||
|
||||
const newProcess = newValue / (max - min);
|
||||
if (process !== newProcess) {
|
||||
if (direction == "left") {
|
||||
if (newProcess < rightProcess.current)
|
||||
leftProcess.current = newProcess;
|
||||
} else {
|
||||
if (newProcess > leftProcess.current) {
|
||||
console.log("newValue", newProcess, rightProcess.current);
|
||||
rightProcess.current = newProcess;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
return (
|
||||
<View
|
||||
// style={[
|
||||
// styles.container,
|
||||
// {
|
||||
// height,
|
||||
// width,
|
||||
// },
|
||||
// ]}
|
||||
style={{
|
||||
...tailwind(),
|
||||
height: "max-content",
|
||||
width,
|
||||
// flex: 1,
|
||||
flexDirection: "row",
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
}}
|
||||
>
|
||||
<View style={{ width: "100%", position: "relative" }}>
|
||||
<View
|
||||
style={{
|
||||
backgroundColor: maximumTrackTintColor,
|
||||
// flex: 1,
|
||||
height: processHeight,
|
||||
width: processWidth,
|
||||
// marginRight: thumbSize / 2,
|
||||
position: "absolute",
|
||||
left: 0,
|
||||
left: thumbSize / 2,
|
||||
zIndex: 1,
|
||||
}}
|
||||
/>
|
||||
<View
|
||||
style={{
|
||||
backgroundColor: minimumTrackTintColor,
|
||||
width: (rightProcess.current - leftProcess.current) * processWidth,
|
||||
height: processHeight,
|
||||
marginLeft: thumbSize / 2 + leftProcess.current * processWidth,
|
||||
position: "absolute",
|
||||
left: 0,
|
||||
zIndex: 10,
|
||||
}}
|
||||
/>
|
||||
</View>
|
||||
<View
|
||||
transition={1000}
|
||||
cachePolicy="disk"
|
||||
// style={tailwind("w-full h-full rounded-lg overflow-hidden")}
|
||||
style={{
|
||||
width: thumbSize,
|
||||
height: thumbSize,
|
||||
backgroundColor: "#fff",
|
||||
borderRadius: 50,
|
||||
position: "absolute",
|
||||
left: leftProcess.current * processWidth,
|
||||
zIndex: 10,
|
||||
}}
|
||||
{...leftWatcher.current?.panHandlers}
|
||||
/>
|
||||
<View
|
||||
transition={1000}
|
||||
cachePolicy="disk"
|
||||
// style={tailwind("w-full h-full rounded-lg overflow-hidden")}
|
||||
style={{
|
||||
width: thumbSize,
|
||||
height: thumbSize,
|
||||
backgroundColor: "#fff",
|
||||
borderRadius: 50,
|
||||
position: "absolute",
|
||||
left: rightProcess.current * processWidth,
|
||||
zIndex: 10,
|
||||
}}
|
||||
{...rightWatcher.current?.panHandlers}
|
||||
/>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
|
@ -9,6 +9,7 @@ import Toast from "react-native-toast-message";
|
|||
import baseRequest from "../../utils/baseRequest";
|
||||
import { generateSignature } from "../../utils/crypto";
|
||||
import MyDivider from "../../components/MyDivider/index";
|
||||
import MySlider from "../../components/MySlider";
|
||||
|
||||
export default function Search({ navigation, route }) {
|
||||
const tailwind = useTailwind();
|
||||
|
|
@ -342,6 +343,18 @@ export default function Search({ navigation, route }) {
|
|||
value={search}
|
||||
/>
|
||||
</View>
|
||||
<MySlider
|
||||
height={40}
|
||||
min={0}
|
||||
max={400}
|
||||
defaultValue={100}
|
||||
step={1}
|
||||
onChange={() => {}}
|
||||
maximumTrackTintColor="#dcdbdb"
|
||||
minimumTrackTintColor="#577bff"
|
||||
processHeight={5}
|
||||
thumbImage={require("../../assets/icon/32DP/edit.png")}
|
||||
/>
|
||||
<ScrollView style={tailwind("flex-1 px-4")}>
|
||||
{zones.length > 0 && (
|
||||
<Text style={tailwind("mt-2 text-white text-xl font-medium")}>
|
||||
|
|
|
|||
Loading…
Reference in New Issue