123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121 |
- /**
- * Created by zack on 2018/5/2.
- */
- import {
- View,
- Text,
- StyleSheet,
- Platform,
- ScrollView,
- FlatList
- } from 'react-native'
- import React, {Component} from 'react'
- import {NavigationBarHeight, TabBarHeight, ScreenDimensions} from '../../../utils/DimensionsTools'
- import BaseNavigationBarStyle from '../../base/BaseNavigationBarStyle'
- import FollowPageViewNavigationBar from './View/FollowPageViewNavigationBar'
- import RecommendItem from './View/RecommendItem'
-
- export default class FollowListViewController extends Component {
- constructor(props) {
- super(props)
- this.state = {
- selectedTagIndex: 0,
- }
- }
-
- renderFamousListItem() {
- return(
- <RecommendItem />
- )
- }
-
- renderRecommendListItem() {
- return(
- <RecommendItem />
- )
- }
-
- // 监听滚动
- onAnimationEnd(e){
- // 求出水平方向上的偏移量
- const offSetX = e.nativeEvent.contentOffset.x
- // 计算当前页码
- const currentPage = offSetX / (ScreenDimensions.width)
- // 重新绘制UI
- this.setState({selectedTagIndex: currentPage})
- }
-
- didSelectedTagIndex(index) {
- let x = index * ScreenDimensions.width
- this.setState({selectedTagIndex: index})
- this._scrollView.scrollTo({x: x, y: 0, animated: true})
- }
-
- render() {
- return(
- <View style={styles.View}>
- <FollowPageViewNavigationBar
- selectedTagIndex = {this.state.selectedTagIndex}
- didSelectedTagIndex = {(index) => {
- this.didSelectedTagIndex(index)
- }}
- didClickLeftButton = {() => {
- this.props.navigator.pop()
- }}
- />
- <ScrollView onMomentumScrollEnd={(e) => {
- this.onAnimationEnd(e)
- }} ref = {(o) => {this._scrollView = o}} horizontal={true} pagingEnabled={true} style = {styles.ScrollView}>
- <View style={styles.ListView}>
- <FlatList
- data = {['a', 'b', 'c']}
- renderItem={({item}) => this.renderRecommendListItem(item)}
- keyExtractor = {(item,index) =>{
- return 'key' + item.key + index
- }}
- ListFooterComponent = {() => {
- return(
- <View style={{width: ScreenDimensions.width, height: 44, backgroundColor: 'white'}} />
- )
- }}
- />
- </View>
-
- <View style={styles.ListView}>
- <FlatList
- data = {['a', 'b', 'c']}
- renderItem={({item}) => this.renderFamousListItem(item)}
- keyExtractor = {(item,index) =>{
- return 'key' + item.key + index
- }}
- ListFooterComponent = {() => {
- return(
- <View style={{width: ScreenDimensions.width, height: 44, backgroundColor: 'white'}} />
- )
- }}
- />
- </View>
-
- </ScrollView>
- </View>
- )
- }
- }
-
- const styles = StyleSheet.create({
- View: {
- width: ScreenDimensions.width,
- height: ScreenDimensions.height,
- backgroundColor: '#ffffff',
- alignItems: 'center',
- },
- ScrollView: {
- marginTop: NavigationBarHeight.height,
- width: ScreenDimensions.width,
- height: ScreenDimensions.height - NavigationBarHeight.height - TabBarHeight.height,
- },
- ListView: {
- width: ScreenDimensions.width,
- height: ScreenDimensions.height - NavigationBarHeight.height - TabBarHeight.height,
- },
- })
|