Реагировать на собственный активный элемент меню боковой панели

1

В реакции native, я сделал меню боковой панели ящика со следующим кодом:

import React, { Component } from 'react';
import { Text, View } from 'react-native';
import { Container, Content, List, ListItem, Left, Right, Icon, Body } from 'native-base';

import styles from './styles'

const menuItems = [
    {
        name: "Home",
        route: "Home",
        icon: "home",
    },
    {
        name: "Nieuws",
        route: "News",
        icon: "paper",
    },
    {
        name: "Coureurs",
        route: "Drivers",
        icon: "person",
    },
    {
        name: "Teams",
        route: "Teams",
        icon: "people",
    },
    {
        name: "Foto's",
        route: "Photos",
        icon: "images",
    },
    {
        name: "Resultaten",
        route: "Results",
        icon: "clipboard",
    },
    {
        name: "Kalender",
        route: "Calendar",
        icon: "calendar",
    },
];

export default class SideBar extends Component {
    constructor(props) {
        super(props);
        this.onMenuPress = this.onMenuPress.bind(this);
        this.state = { currentPage: 'Home' };
    }

    componentDidUpdate () {
        this.render();
    }

    onMenuPress = (item) => {
        this.setState({ currentPage: item });
        this.forceUpdate();
    }

    render() {
        return(
            <Container style={styles.container}>
                <Content>
                    <List
                        dataArray={menuItems}
                        renderRow={item =>
                            <ListItem style={this.state.currentPage == item.name ? styles.activeMenuItem : styles.menuItem} button onPress={() => this.onMenuPress(item.name)}>
                                <Icon name={item.icon} style={this.state.currentPage == item.name ? styles.activeMenuIcon : styles.menuIcon} />
                                <Text style={this.state.currentPage == item.name ? styles.activeMenuItemText : styles.menuItemText}>
                                    {item.name}
                                </Text>
                            </ListItem>
                        }
                    />
                </Content>
            </Container>
        );
    }
}

Мои стили:

export default {
    container: {
        backgroundColor: "#48545A",
        flex: 1,
        justifyContent: 'center',
    },
    menuItem: {
        marginLeft: 0,
        backgroundColor: "#48545A",
        borderBottomWidth: 1,
        borderColor: '#5B686E',
    },
    activeMenuItem: {
        marginLeft: 0,
        backgroundColor: "#FAA41A",
        borderBottomWidth: 1,
        borderColor: '#5B686E',
    },
}

Это то, что я получаю на экране

Я попытался сделать активный элемент меню, поэтому он изменяет текущий пункт меню и дает ему разные стили. Я добавил состояние, которое будет содержать currentPage.

В моих списках есть сокращения, если операторы проверяют, равен ли currentPage текущему элементу item.name.

style={this.state.currentPage == item.name ? styles.activeMenuItem : styles.menuItem}

Теперь, когда я нажимаю элемент меню, он не обновляет боковую панель. Состояние изменилось, проверил, что с простым alert

Как я могу это достичь?

  • 0
    Я не знаком с React Native в частности, но этот стиль поддержки выглядит немного не в style={this.state.currentPage == item.name ? styles.activeMenuItemText : styles.menuItemText} - style={this.state.currentPage == item.name ? styles.activeMenuItemText : styles.menuItemText} . Какое значение имеют styles.menuItemText и styles.activeMenuItemText . Это должен быть объект, чтобы он работал
  • 0
    Я импортирую стили, import styles from './styles'; Я добавил свои стили к своему вопросу
Показать ещё 3 комментария
Теги:
react-native

1 ответ

0

Вы используете double equals вместо тройного равенства. Всегда используйте тройные равные. Я бы изменил это первым, потому что это может быть проблемой.

Также дважды проверьте, что ваше событие пресса активируется.

  • 0
    Я изменил дубликат, равный тройному, но тоже не работает. Я также проверил, что событие onPress срабатывает.
  • 0
    Console.log, что такое «this.state.currentPage» и что такое «item.name».

Ещё вопросы

Сообщество Overcoder
Наверх
Меню