如何解决PanResponder React Native 不适用于 Android
我正在尝试在 React Native 中构建滑块,但我没有看到 panResponder 工作。我与 API docs 一起工作,但我无法弄清楚我错过了什么。 当我尝试移动步进器时,应用程序没有响应
技术:
react-native cli(没有博览会)
我的代码:
const App = () => {
const [sliderDimensions,setSliderDimensions] = useState({
height: null,top: null,bottom: null,});
const stepperAnim = useRef(new Animated.Value(0)).current;
const railFillAnim = useRef(new Animated.Value(0)).current;
const stepperResponder = React.useRef(PanResponder.create({
onStartShouldSetPanResponder: () => true,onPanResponderGrant: () => {
stepperAnim.setoffset(stepperAnim._value);
railFillAnim.setoffset(railFillAnim._value);
},onPanResponderMove: (evt,{dy,moveY}) => {
if (moveY > sliderDimensions.top && moveY < sliderDimensions.bottom) {
stepperAnim.setValue(dy);
railFillAnim.setValue(-dy);
}
},onPanResponderRelease: () => {
stepperAnim.flattenOffset();
railFillAnim.flattenOffset();
},}));
return (
<SafeAreaView>
<Text style={styles.title}>What's your height?</Text>
<View
style={styles.slider}
onLayout={(evt) => {
const {height,y} = evt.nativeEvent.layout;
setSliderDimensions({
height: height,top: y,bottom: y + height,});
}}>
<View style={styles.rail}>
<Animated.View style={[styles.railFill,{height: railFillAnim}]}>
{sliderDimensions.height
? Array.apply(
null,Array(Math.floor(sliderDimensions.height / 10)),).map((item,index) => (
<View
key={index}
style={[styles.railFillSpace,{bottom: index * 10}]}
/>
))
: null}
</Animated.View>
</View>
<Animated.View
{...stepperResponder.panHandlers}
style={[
styles.stepper,{
transform: [{translateY: stepperAnim}],},]}
/>
</View>
</SafeAreaView>
);
};
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。