List 如何防止重新加载组件时自动滚动到顶部？_List_React Native_Scrollview_Native Base

List 如何防止重新加载组件时自动滚动到顶部？

list react-native

List 如何防止重新加载组件时自动滚动到顶部？,list,react-native,scrollview,native-base,List,React Native,Scrollview,Native Base,我在react native和nativebase中面临一个问题 <Content> <List> <ListItem> <Left style={{ flex: 0 }}> <Icon name="user" type="SimpleLineIcons"></Icon> </Left> <Body> <

我在react native和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>

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

请在

组件内尝试此道具：

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

handleScroll（事件）{
this.setState（{scrollY:event.nativeEvent.contentOffset.y}）；
}
render（）{
if（this.contentRef）{
if（此.contentRef.\u滚动视图）{
this.contentRef.\u scrollview.resetScrollToCoords（{x:0，y:this.state.scrollY}）；
}
}
返回(
this.contentRef=c}
onScroll={event=>this.handleScroll（event）}
>
);
}

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

我的列表组件在renderer方法中，所以每当我切换“render method fire”和“list autocamatilly”时，都会向上切换

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

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

例如：

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

render（）{
常量抽屉内容=（）=>(
)
返回(
....
)
}

到

drawerContent=（）=>(
)
render（）{
返回(
....
)
}

试试这个：我想要滚动列表我想FlatList会满足你的要求我会创建一个应用程序并选中Hello，你可以控制这个问题，在使用ref.scrollToIndex（{animated:true，index/lastPointValue}）更新状态/组件使用后获取FlatList ref并存储最后一个滚动停止点值，谢谢：-）是的，我尝试过了。它不起作用。我还尝试了启用AutomaticScroll={false}您可以在子组件中插入。@KhurshidAnsari我添加了一个新的解决方案。这个想法是在每次渲染后滚动到coords。我刚刚尝试过，但当我滚动到dow时，它会自动向上滚动。

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