上篇記錄寫到正在嘗試寫banner焦人，這里發(fā)現(xiàn)一個(gè)問題-由于我外層使用了一個(gè)三方的庫<a href=https://github.com/skv-headless/react-native-scrollable-tab-view>react-native-scrollable-tab-view</a>作為外層可左右滑動(dòng)的菜單頁容器 子view里面的組件左右滑動(dòng)事件失效了
代碼如下
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>
發(fā)現(xiàn)HomeScene里面設(shè)置了onpress的組件在界面繪制完成后自動(dòng)調(diào)用了點(diǎn)擊的方法嫡霞，并且就算在外層包一個(gè) TouchableOpacity也是一樣的結(jié)局雖然點(diǎn)擊的時(shí)候 背景色會(huì)有變化 因?yàn)槲业腟crollView 是作為banner使用的 所以按住左右滑動(dòng)的時(shí)候父容器直接響應(yīng)了手勢(shì)開始左右滑動(dòng)。于是我看了下ScrollableTabView 里面的屬性，發(fā)現(xiàn)有個(gè)控制是否左右滑動(dòng)的屬性locked = true(默認(rèn)是false)
于是我想到 我在banner滑動(dòng)的時(shí)候通過傳值來控制是否允許父響應(yīng)左右滑動(dòng)绎狭，接下來先將父頁面改為
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');
}
這樣在滑動(dòng)banner的時(shí)候時(shí)時(shí)返回值來告訴父是我在滑動(dòng)灌侣，這樣就解決了這個(gè)問題。并且在適當(dāng)根據(jù)自己的需求來允許父在左右滑動(dòng)卖陵。
