勤做筆記,方便自己,幫助他人。
代碼地址:https://github.com/libinWeny/RNLibin
1.gif
核心代碼如下:
1.頭部的一個切換按鈕。這里我用的是螞蟻金服的SegmentedControl
組件,這個自己畫也很簡單。
<SegmentedControl
tintColor={CS.THEME11}
style={styles.headerCenter}
values={[ '房產圈', '互動' ]}
selectedIndex={this.state.select}
onChange={(e) => this.refs.ScrollView.scrollTo({
x : W * e.nativeEvent.selectedSegmentIndex,
animated : true
})}
/>
2.兩個頁面。pagingEnabled
這個屬性控制嗎每次滑動為屏幕一屏寬度。
onMomentumScrollEnd
滾動動畫結束時調用此函數 可以獲取到當前的x值
<ScrollView
ref={'ScrollView'}
horizontal
showsHorizontalScrollIndicator={false}
pagingEnabled
onMomentumScrollEnd={(e) => this.changeSelectTitle(e)}
>
<Group navigation={this.props.navigation}/>
<Interact navigation={this.props.navigation}/>
</ScrollView>
3.滑動的時候,跟著修改選中的頭部
changeSelectTitle(e) {
let setX = e.nativeEvent.contentOffset.x;
if (setX) {
this.setState({ select : 1 })
} else {
this.setState({ select : 0 })
}
}