上篇记录写到正在尝试写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的时候时时返回值来告诉父是我在滑动，这样就解决了这个问题。并且在适当根据自己的需求来允许父在左右滑动。
