react-native吸顶效果

最新推荐文章于 2022-08-26 15:02:55 发布

黑化白菜可

最新推荐文章于 2022-08-26 15:02:55 发布

阅读量1.3k

点赞数 1

分类专栏：前端

本文链接：https://blog.csdn.net/qq_43211489/article/details/100777163

版权

这篇博客记录了如何在React-Native项目中实现吸顶效果，主要涉及TabPage和ScreenUtil的使用，便于阅读和参考。

摘要由CSDN通过智能技术生成

从网络上搜到的，方便自己下次阅读

展示页面

import React from 'react';
import ScrollableTabView, {
   ScrollableTabBar,} from 'react-native-scrollable-tab-view';
import * as ScreenUtil from './ScreenUtil';

import {
   
    View,
    StyleSheet,
    Text,
    ImageBackground,
    Image,
} from 'react-native';

import TabPage from './TabPage';

export default class IndexScreen extends React.Component {
   

    static propTypes = {
   };

    static defaultProps = {
   };

    constructor(props) {
   
        super(props);
        this.state = {
   }

    }


    render() {
   
        return (
            <View style={
   styles.container}>
                {
   this._renderHeader()}
                {
   this.renderScrollTab()}

            </View>
        )

    }

    onScroll = (e) => {
   
        let {
   x, y} = e.nativeEvent.contentOffset;
        console.log(y);
        if (y <= 100) {
   
            this.refs._title.setNativeProps({
   

                style: {
   
                    top: -y
                }
            });
            this.refs._scrolltab.setNativeProps({
   
                style: {
   
                    marginTop: 100 - y
                }
            })
        } else {
   
            this.refs._title.setNativeProps({
   
                style: {
   
                    top: -100
                }
            });
            this.refs._scrolltab.setNativeProps({
   
                style: {
   
                    marginTop: 0
                }
            })
        }
    };


    /**
     * 渲染头部
     * @private
     */
    _renderHeader() {
   
        let icon = 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1496299246419&di=f6d9e7d99236cb4319782d95cbd7f740&imgtype=0&src=http%3A%2F%2Fwww.pptbz.com%2FSoft%2FUploadSoft%2F200911%2F2009110521380826.jpg';
        let icon2 = 'http://pic28.nipic.com/20130503/9252150_153601831000_2.jpg';
        return (
            <ImageBackground
                ref={
   '_title'}
                style={
   styles.headerContainer}
                source={
   {
   uri: icon2}}>
            </ImageBackground>
        );
    }

    renderScrollTab() {
   
        return (
            <View
                ref={
   '_scrolltab'}
                style={
   styles.scrollTab}>
                <ScrollableTabView
                    listKey='d' key='4'

                    style={
   {
   height: ScreenUtil.screenH}}
                    renderTabBar={
   () => <ScrollableTabBar/>}
                >
                    <TabPage listKey='a' key='1' tabLabel='Tab #1' onScroll={
   this.onScroll}/>
                    <TabPage listKey='b' key='2' tabLabel='Tab #2' onScroll={
   this.onScroll}/>
                    <TabPage listKey='c' key='3' tabLabel='Tab #3' onScroll={
   this.onScroll}/>
                </ScrollableTabView>
            </View>
        )
    }

}

const styles = StyleSheet.create({
   
    container: {
   
        flex: 1,
        width: ScreenUtil.screenW
    },
    headerContainer: {
   
        width: ScreenUtil.screenW,
        height: 60,
        position: 'absolute',
        top: 0,
        justifyContent: 'center'
    },
    scrollTab