react-native 记录--Scrollview嵌套导致子view触摸事件失效

上篇记录写到正在尝试写banner，这里发现一个问题-由于我外层使用了一个三方的库react-native-scrollable-tab-view作为外层可左右滑动的菜单页容器 子view里面的组件左右滑动事件失效了
代码如下

import ScrollableTabView, {DefaultTabBar} from 'react-native-scrollable-tab-view';
 }
                tabBarUnderlineColor='#FF0000'
                tabBarBackgroundColor='#FFFFFF'
                tabBarActiveTextColor='#9B30FF'
                tabBarInactiveTextColor='#7A67EE'>
                
                 
                 
                 
            

HomeScene 布局如下

               
                    { console.log('onScroll!')}}
                               style={[styles.scrollview,styles.horizontalScrollView]}>
                       {this.state.bannerIcon.map((uri,i)=>{return this.scrollViewItem(uri,i)})}
                   
                    this.listItem(rowData)}
                   />
               
           

发现HomeScene里面设置了onpress的组件在界面绘制完成后自动调用了点击的方法，并且就算在外层包一个 TouchableOpacity也是一样的结局虽然点击的时候 背景色会有变化 因为我的ScrollView 是作为banner使用的 所以按住左右滑动的时候父容器直接响应了手势开始左右滑动。于是我看了下ScrollableTabView 里面的属性，发现有个控制是否左右滑动的属性locked = true(默认是false)
于是我想到 我在banner滑动的时候通过传值来控制是否允许父响应左右滑动，接下来先将父页面改为

constructor(props){
        super(props)
        this.state = {
            enable: true
        };
    }

    _enableScrollableTabView(enable){
        this.setState({
            enable:enable
        })
        console.log(this.state.enable);
    }

 }
                tabBarUnderlineColor='#FF0000'
                tabBarBackgroundColor='#FFFFFF'
                tabBarActiveTextColor='#9B30FF'
                tabBarInactiveTextColor='#7A67EE'>
                
                
                
                
            

接下来子页面

render(){
        return(
           
               
                    { console.log('onScroll!')}}
                               style={[styles.scrollview,styles.horizontalScrollView]}>
                       {this.state.bannerIcon.map((uri,i)=>{return this.scrollViewItem(uri,i)})}
                   
                    this.listItem(rowData)}
                   />
               
           
        )
    }

onTouchStart=(e)=>{
        console.log('onTouchStart');
        this.props.callback(true);
    }

    onTouchMove=(e)=>{
        console.log('onTouchMove');
        this.props.callback(true);
    }

    onTouchEnd=(e)=>{
        console.log('onTouchEnd');
    }

    onScrollEndDrag=(e)=>{
        console.log('onScrollEndDrag');
    }

这样在滑动banner的时候时时返回值来告诉父是我在滑动，这样就解决了这个问题。并且在适当根据自己的需求来允许父在左右滑动。

作者：KingZd
链接：https://www.jianshu.com/p/24e0d7661f9b
来源：简书
简书著作权归作者所有，任何形式的转载都请联系作者获得授权并注明出处。