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

【问题标题】：How to prevent automatic scroll to top when rerender component?重新渲染组件时如何防止自动滚动到顶部？
【发布时间】：2020-04-19 08:45:47
【问题描述】：

我在用 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>

当我更新状态（重新渲染组件）列表自动滚动到顶部/第一：

this.setState({profile: true });

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

【问题讨论】：

试试这个：https://stackoverflow.com/questions/30644581/react-native-how-to-disable-scrolling-in-listview
我想要滚动列表
我认为 FlatList 会满足您的要求
我将创建一个应用并检查
您好，您可以控制此问题，使用 flatList ref 并在使用 ref.scrollToIndex({ animated: true, index /lastPointValue}) 更新您的状态/组件使用后存储最后一个滚动停止点值，谢谢:-)

标签： list react-native scrollview native-base

【解决方案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)}
        >
    );
}

【讨论】：

是的，我试过了。它不工作。我也试过 enableAutomaticScroll={false}
您可以在子组件中插入。
@KhurshidAnsari 我添加了新的解决方案。这个想法是在每次渲染后将滚动设置为坐标。
我刚试过，但是当我向下滚动时它会自动向上滚动。

【解决方案2】：

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

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

现在，我将列表组件从渲染方法中取出。这解决了我的问题。

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

例子：

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

【讨论】：