react-native ScrollView / toggle 技术记录

收起效果图:

image.png

展开效果图:

image.png


使用开关toggle控制收展模式:

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

slice(0,3) 控制展现内容,首次渲染展现3个内容。

{users.projects.slice(0, 3).map((project, key) => (
    <List paddingHorizontal={15} key={project.id}>
        <Row>
            <Text>起名</Text>
            <Price>50元/次</Price>
        </Row>
        <Illustrate numberOfLines={2}>我是内容</Illustrate>
    </List>
))}

slice(3)删除首次渲染的3个内容,渲染剩下的内容。

{users.projects.slice(3).map((project, key) => (
    <List paddingHorizontal={15} key={project.id}>
        <Row>
            <Text>起名</Text>
            <Price>50元/次</Price>
        </Row>
        <Illustrate numberOfLines={2}>我是内容</Illustrate>
    </List>
))}


效果图(头部背景为透明):

image.png


滚动后效果图(头部背景为蓝色):

image.png


使用ScrollView 里的onScroll 事件控制滚动事件。

默认头部背景为透明:

constructor(props) {
    super(props);
    this._onScroll = this._onScroll.bind(this);
    this.state = {
        backgroundColor: "transparent",
    };
}

根据滚动高度控制头部背景色:

onScroll(event) {
    let { y } = event.nativeEvent.contentOffset;
    if (y >= 0) {
        this.setState({ backgroundColor: "" });
    }
    if (y <= 10) {
        this.setState({ backgroundColor: "transparent" });
    }
}


<ScrollView
    stickyHeaderIndices={[0]}
    onScroll={this.onScroll}
    scrollEventThrottle={16}
>
    <Header
        navigation={navigation}
        goBack
        like_share
        backgroundColor={this.state.backgroundColor}
    />
</ScrollView>


onScroll:滚动时触发,触发多次,每帧最多调用一次,调用频率使用scrollEvenThrottle属性控制。

onMomentumScrollBegin:但一帧滚动开始时调用。

onMomentumScrollEnd:但一帧滚动结束时调用。

onTouchStart:按下屏幕时触发。

onTouchMove:移动手指时触发。

onTouchEnd:手指离开屏幕触摸结束时触发。


问题:

但不知道为什么后面 scrollView onScroll 出现了卡顿情况?

日记本

如果觉得我的文章对您有用,请随意赞赏。您的支持将鼓励我继续创作!

赞赏支持
被以下专题收入,发现更多相似内容