Блог

Я новичок в RN, и я пытаюсь показать / скрыть элемент в списке на основе зарегистрированного состояния пользователя.

Я достиг цели скрыть элемент при выходе из системы, но все еще испытываю проблемы со входом в систему.

Я использую react-native-elements и особенно компонент SideMenu.

Я создал два массива, как вы можете видеть ниже.

Вот мои массивы:

 var listLogged = [
   {
     name        : 'Page 1'
   },
   {
     name        : 'Page 2'
   },
   {
     name        : 'Logout'
   }];

 var listNotLogged = [
   {
     name        : 'Page 1'
   },
   {
     name        : 'Page 2'
   }];
  

При рендеринге:

 if (this.state.LoggedIn) {
<List>
{
 listLogged.map((item, j) => (
   <ListItem
    key={j}
    title={item.name}
   />
 ))
}
</List>
} else {
<List>
{
  listNotLogged.map((item, j) => (
    <ListItem
     key={j}
     title={item.name}
    />
   ))
}
</List>
  

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

Надеюсь на некоторую помощь! Заранее благодарю

Если ваш <List /> компонент находится внутри a React Component , вы можете использовать this.setState({ LoggedIn: true }) для изменения состояния, и render() функция автоматически запустится повторно.

Я привел пример ниже, чтобы показать вам, как нажатие кнопки «Войти» может изменить состояние, что приводит render() к повторному запуску с новым состоянием и приводит к другому результату. Нажатие Logout переключит состояние обратно:

 import React, { Component } from 'react';
import { List, ListItem, SideMenu, Button } from 'react-native-elements';

const list = [  
  { name: 'Page 1', onPress: null },
  { name: 'Page 2', onPress: null }
];

class Example extends Component {

  constructor(props) {
    super(props);
    this.state = { LoggedIn: false };
  }

  toggleLoggedInState = () => {
    this.setState({ LoggedIn: !this.state.LoggedIn });
  }

  render() {
    let button;
    if (this.state.LoggedIn) {
      list.push({ name: 'Logout', onPress: this.toggleLoggedInState });
      button = <Button title="Log In" onPress={this.toggleLoggedInState} />;
    }

    const items = list.reduce((array, item) => {
      array.push(
        <ListItem
          key={j}
          title={item.name}
          onPress={item.onPress)
        />
      );
      return array;
    }, []);

    return (
      <SideMenu>
        <List>
          {items}
        </List>
        {button}
      </SideMenu>
    )
  }
}

export default Example;
  

Если вы хотите изменить состояние в другом месте и заставить это представление реагировать, вам лучше использовать что-то вроде redux под капотом. Это дает вам основу state для всего вашего приложения.