Как предотвратить автоматическую c прокрутку вверх при рендеринге компонента? - PullRequest
Новая
       39

Как предотвратить автоматическую c прокрутку вверх при рендеринге компонента?

3 голосов
/ 19 апреля 2020

Я столкнулся с одной проблемой в реакции 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>

Когда я обновляю список состояний (компонент рендеринга), автоматически прокручивается к началу / началу: 

this.setState({profile: true });

Как отключить автопрокрутку для лучшего взаимодействия с пользователем?

Ответы [ 2 ]

1 голос
/ 28 апреля 2020

Пожалуйста, попробуйте эту опору внутри <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)}
        >
    );
}
0 голосов
/ 04 мая 2020

Я создал функциональный компонент списка и рендерил в ящик. В ящике есть текст и переключатель компонентов.

Мой компонент списка находился внутри метода рендерера, поэтому всякий раз, когда я переключаю переключатель метода рендера, запускается и автоматически добавляется список go.

Теперь я поместил компонент списка из метода рендеринга. Это решит мою проблему.

Спасибо всем, ребята, за ваш быстрый ответ и предложение.

Пример: 

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>
)
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...