React-native自定义view手势滑动 无响应拦截问题

//这个视图是否在触摸开始时想成为响应器? 
onStartShouldSetPanResponder:this._onStartShouldSetPanResponder,
//所以如果一个父视图要防止子视图在触摸开始时成为响应器,它应该有一个 onStartShouldSetResponderCapture 处理程序,返回 true。
onStartShouldSetPanResponderCapture:this._onStartShouldSetPanResponderCapture,
//当视图不是响应器时,该指令被在视图上移动的触摸调用:这个视图想“声明”触摸响应吗? 
onMoveShouldSetPanResponder:this._onMoveShouldSetPanResponder,
//所以如果一个父视图要防止子视图在移动开始时成为响应器,它应该有一个 onMoveShouldSetPanResponderCapture 处理程序,返回 true。
onMoveShouldSetPanResponderCapture:this._onMoveShouldSetPanResponderCapture,
//当前有其他的东西成为响应器并且没有释放它。 
onPanResponderReject: this._onPanResponderReject,
//视图现在正在响应触摸事件。这个时候要高亮标明并显示给用户正在发生的事情。
onPanResponderGrant: this._onPanResponderGrant,
//手势开始
onPanResponderStart: this._onPanResponderStart,
//手势结束
onPanResponderEnd: this._onPanResponderEnd,
//用户正移动他们的手指 
onPanResponderMove: this._onPanResponderMove,
//在触摸最后被引发,即“touchUp” 
onPanResponderRelease: this._onPanResponderRelease,
//其他的东西想成为响应器。这种视图应该释放应答吗?返回 true 就是允许释放 
onPanResponderTerminationRequest:this._onPanResponderTerminationRequest,
//响应器已经从该视图抽离了。可能在调用onResponderTerminationRequest 之后被其他视图获取,也可能是被操作系统在没有请求的情况下获取了(发生在 iOS 的 control center/notification center)。 
onPanResponderTerminate: this._onPanResponderTerminate,
// Returns whether this component should block native components from becoming the JS
// responder. Returns true by default. Is currently only supported on android.
onShouldBlockNativeResponder:this._onShouldBlockNativeResponder,

其他的不介绍了,官网用法都有,这里有一个问题在网上搜索了不少资料也没解决

onPanResponderEnd: this._onPanResponderEnd, // 结束 包括release的方法

onPanResponderTerminate: this._onPanResponderTerminate, // 判断当前 手势 如果被拦截了就执行这里 不会再进去release判断

如果没有响应的情况下,吧 下面这个拦截的方法加上然后再在里面执行同样的代码就能解决了

_onPanResponderEnd(e, gestureState) {
//your code
    const {onAfterChange} = this.props;

    if (onAfterChange) {
        onAfterChange(this.state.process);
        // onAfterChange(gestureState.x0 - 120);
    }
}

_onPanResponderTerminate(e, gestureState) {
//your code
    const {onAfterChange} = this.props;

    if (onAfterChange) {
        onAfterChange(this.state.process);
        // onAfterChange(gestureState.x0 - 120);
    }
}
  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
React Native中可以使用第三方库`react-native-scrollable-tab-view`来实现滑动标题栏。以下是一个简单的示例代码: ```tsx import * as React from 'react'; import { StyleSheet, Text, View } from 'react-native'; import ScrollableTabView, { DefaultTabBar } from 'react-native-scrollable-tab-view'; type Props = {}; const FirstTabScreen = () => { return ( <View style={styles.container}> <Text>First Tab</Text> </View> ); }; const SecondTabScreen = () => { return ( <View style={styles.container}> <Text>Second Tab</Text> </View> ); }; const ScrollableTabNavigator = (props: Props) => { return ( <ScrollableTabView renderTabBar={() => <DefaultTabBar />} tabBarUnderlineStyle={styles.tabBarUnderline} tabBarBackgroundColor="#FFFFFF" tabBarActiveTextColor="#000000" tabBarInactiveTextColor="#999999" > <FirstTabScreen tabLabel="Tab 1" /> <SecondTabScreen tabLabel="Tab 2" /> </ScrollableTabView> ); }; export default ScrollableTabNavigator; const styles = StyleSheet.create({ container: { flex: 1, justifyContent: 'center', alignItems: 'center', }, tabBarUnderline: { backgroundColor: '#000000', height: 2, }, }); ``` 在这个示例中,我们首先导入了`react-native-scrollable-tab-view`库中的`ScrollableTabView`和`DefaultTabBar`组件。然后,我们创建了两个Tab项组件`FirstTabScreen`和`SecondTabScreen`,每个组件中都有一个`tabLabel`属性,用于设置Tab的标签。最后,我们使用`ScrollableTabView`组件来包含Tab项,并设置了一些Tab导航的样式属性,例如`tabBarUnderlineStyle`、`tabBarBackgroundColor`、`tabBarActiveTextColor`和`tabBarInactiveTextColor`。在`renderTabBar`属性中,我们使用了`DefaultTabBar`组件来渲染Tab导航栏。 注意:`react-native-scrollable-tab-view`库已经很久没有更新了,建议使用`react-native-tab-view`等其他替代库。
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值