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

Question

我在使用 nativebase 进行本机反应时遇到了一个问题。

<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>

当我更新状态（重新渲染组件）列表时自动滚动到 top/first：

this.setState({profile: true });

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

Answer 1

请在 <Content> 组件中尝试这个道具：

<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)}
        >
    );
}

Answer 2

我创建了功能列表组件并在抽屉中呈现。在抽屉里有文本和开关组件。

我的列表组件在渲染器方法中，因此每当我切换渲染器方法时都会触发并自动列出列表。

现在，我把 list 组件放到了 render 方法之外。这解决了我的问题。

感谢大家的快速回复和建议。

示例：

render(){
const drawerContent = ()=>(
<Content> 
 <List> 
  <Switch value={this.state.flag) />
 </List>
</Content> 
)
return(
<Drawer content={drawerContent}>
 <Container> 
  ....
 </Container> 
</Drawer>
)
}

到

drawerContent = ()=>(
<Content> 
 <List> 
   <Switch value={this.state.flag) />
 </List>
</Content> 
)
render(){
return(
<Drawer content={this.drawerContent}>
 <Container> 
  ....
 </Container> 
</Drawer>
)
}

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

How to prevent automatic scroll to top when rerender component?

list

scrollview

react-native

native-base