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

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> 

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

this.setState({profile: true });

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

Answer 1

我创建了功能列表组件并在抽屉中渲染。抽屉里有文字和开关组件。

我的列表组件位于渲染器方法内部，因此每当我切换渲染方法时，列表组件就会自动向上移动。

现在，我将列表组件放在渲染方法之外。这解决了我的问题。

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

例子 ：

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