React本机活动侧边栏菜单项

Question

在React 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。

我的ListItems具有速记if语句要检查CurrentPage是否等于当前项目。名称。

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

现在，当我单击菜单项时，它不会更新侧边栏。状态确实改变了，用简单的alert

检查了这一点

我该如何实现？

Answer 1

使用双等平等而不是三重等式。始终使用三重平等。我会首先更改此问题，因为这可能是问题。

还仔细检查您的新闻事件。