gpt4 book ai didi

list - 重新渲染组件时如何防止自动滚动到顶部?

转载 作者:行者123 更新时间:2023-12-03 19:13:45 25 4
gpt4 key购买 nike

我在与 nativebase react 原生时面临一个问题。

<Content> 
<List>
<ListItem>
<Left style={{ flex: 0 }}>
<Icon name="user" type="SimpleLineIcons"></Icon>
</Left>
<Body>
<Text> Profile </Text>
</Body>
<Right>
<Switch value={this.state.profile} />
</Right>
</ListItem>
....
</List>
</Content>

当我更新状态(重新渲染组件)列表自动滚动到顶部/第一:
this.setState({profile: true });

如何防止自动滚动以获得更好的用户体验?

最佳答案

请在 <Content> 组件中试试这个 Prop :

<Content enableResetScrollToCoords={false} />

您也可以尝试此解决方案:
handleScroll(event) {
this.setState({ scrollY: event.nativeEvent.contentOffset.y });
}

render() {
if (this.contentRef) {
if (this.contentRef._scrollview) {
this.contentRef._scrollview.resetScrollToCoords({ x: 0, y: this.state.scrollY });
}
}

return (
<Content
ref={(c) => this.contentRef = c}
onScroll={event => this.handleScroll(event)}
>
);
}

关于list - 重新渲染组件时如何防止自动滚动到顶部?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/61301681/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com