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

阳光穿透心脏的1/2处 2022-02-28 12:14 538阅读 0赞

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