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

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

import ScrollableTabView, {DefaultTabBar} from 'react-native-scrollable-tab-view';
<ScrollableTabView
                tabBarPosition='bottom'
                renderTabBar={() => <CustomTabBar/>}
                tabBarUnderlineColor='#FF0000'
                tabBarBackgroundColor='#FFFFFF'
                tabBarActiveTextColor='#9B30FF'
                tabBarInactiveTextColor='#7A67EE'>
                <HomeScene tabLabel='a'/>
                 <HomeScene tabLabel='a'/>
                 <HomeScene tabLabel='a'/>
                 <HomeScene tabLabel='a'/>
            </ScrollableTabView>

HomeScene 布局如下

<View style={{backgroundColor:'palegreen',height:height}}>
               <View style={{backgroundColor:'gray'}}>
                   <ScrollView horizontal={true}
                               scrollEnabled={true}
                               removeClippedSubviews={true}
                               showsHorizontalScrollIndicator={false}
                               automaticallyAdjustContentInsets={false}
                               pagingEnabled={true}

                               onTouchStart={this.onTouchStart}
                               onTouchMove={this.onTouchMove}
                               onTouchEnd={this.onTouchEnd}
                               onScrollEndDrag={this.onScrollEndDrag}

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

发现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);
    }

<ScrollableTabView
                locked={this.state.enable}
                tabBarPosition='bottom'
                renderTabBar={() => <CustomTabBar/>}
                tabBarUnderlineColor='#FF0000'
                tabBarBackgroundColor='#FFFFFF'
                tabBarActiveTextColor='#9B30FF'
                tabBarInactiveTextColor='#7A67EE'>
                <HomeScene status={this.state.enable} callback={this._enableScrollableTabView.bind(this)} tabLabel='a'/>
                <HomeScene status={this.state.enable} callback={this._enableScrollableTabView.bind(this)} tabLabel='b'/>
                <HomeScene status={this.state.enable} callback={this._enableScrollableTabView.bind(this)} tabLabel='c'/>
                <HomeScene status={this.state.enable} callback={this._enableScrollableTabView.bind(this)} tabLabel='d'/>
            </ScrollableTabView>

接下来子页面

render(){
        return(
           <View style={{backgroundColor:'palegreen',height:height}}>
               <View style={{backgroundColor:'gray'}}>
                   <ScrollView horizontal={true}
                               scrollEnabled={true}
                               removeClippedSubviews={true}
                               showsHorizontalScrollIndicator={false}
                               automaticallyAdjustContentInsets={false}
                               pagingEnabled={true}

                               onTouchStart={this.onTouchStart}
                               onTouchMove={this.onTouchMove}
                               onTouchEnd={this.onTouchEnd}
                               onScrollEndDrag={this.onScrollEndDrag}

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

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
来源：简书
简书著作权归作者所有，任何形式的转载都请联系作者获得授权并注明出处。