monterosalondon / react-native-parallax-scroll

Parallax scroll view for react-native
MIT License
555 stars 63 forks source link

When you use FlatList, if you update the data of FlatList, the head will reset. #15

Closed yunuo-tech closed 6 years ago

yunuo-tech commented 6 years ago

1 -18-2018 19-33-10

z4o4z commented 6 years ago

Hi @benaheng. How are you updating data? Can you add some example of code?

yunuo-tech commented 6 years ago

@z4o4z example code,thanks `

constructor(props) {
    super(props)
    this.state = {
        dataSource  : [],
        isRefreshing: false,
        bottomWidth : 0,
        isHeaderFixed: false,
    }
    this.dataUrl = "#"
    this.page=1
    this.rows=[]
}

componentDidMount() {
    this.onFetch()
}

onFetch = () => {
    Net.get(this.dataUrl, {num: 5, cid: 1, page: this.page}).then(ret => {

        if(this.state.dataSource.length==0){
            this.rows=ret.data
        }else{
            this.rows=this.rows.concat(ret.data)
        }
        this.setState({
            dataSource: this.rows,
            isRefreshing:false
        })

    })
}

onRefresh=()=>{
    this.page=1
    this.rows=[]
    this.setState({
        isRefreshing:true,
        dataSource: this.rows
    })

    this.onFetch()
}

onEndReached = () => {
    this.page++
    this.onFetch()
}

`

` <ParallaxScroll renderHeader={({animatedValue}) => ( <NavBar animatedValue={animatedValue} headerTitle={'本地服务'} style={{ backgroundColor : "rgba(255,255,255,0)", borderBottomWidth: this.state.bottomWidth, elevation : 0 }} headerLeft={false} />

                )}

                headerFixedBackgroundColor={"#fff"}
                fadeOutParallaxForeground={true}
                headerHeight={64}
                isHeaderFixed={true}
                parallaxHeight={170}

                renderParallaxForeground={({animatedValue}) =>

                    <Flex justify={'center'} direction="row" style={{height: 220}}>

                        <A style={styles.icon_box} onPress={
                            () => Nav.open('Zhoubian')

                        }>
                            <Image
                                style={styles.icon}
                                source={require('../../images/icon/icon_zhoubianyou.png')}/>
                            <Label size={'sm'} style={styles.icon_font}>周边</Label>
                        </A>

                        <A onPress={
                            () => Nav.open('Service')

                        } style={styles.icon_box}>
                            <Image
                                style={styles.icon}
                                source={require('../../images/icon/icon_huodong.png')}/>

                            <Label size={'sm'} style={styles.icon_font}>服务</Label>
                        </A>

                    </Flex>

                }
                renderParallaxBackground={({animatedValue}) =>
                    <ImageBackground style={styles.header_bg} source={require('../../images/local_bg.png')}>

                    </ImageBackground>
                }

                scrollableComponent={FlatList}
                data={this.state.dataSource}
                onRefresh={this.onFetch}
                refreshing={this.state.isRefreshing}
                renderItem={({item}) => (
                    <A onPress={
                        () => Nav.open('NewsDetail', {id: item.ap_id, type: item.ap_stype})
                    }>
                        <NewsItem data={item}/>
                    </A>

                )}
                onEndReachedThreshold={0.1}
                onEndReached={this.onEndReached}
                keyExtractor={item => (item.ap_id)}

            />`
z4o4z commented 6 years ago

Hi @yunuo-tech, sorry for the long response. You right it is a bug. But I have a good news, it's already fixed in the v1.5.2. Can you test the new version?