Question

在本机反应中，我使用以下代码制作了抽屉边栏菜单：

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',
    },
}

This is what I get on the screen

我尝试制作一个活动菜单项，因此它会更改当前菜单项并为其指定不同的样式。我添加了一个状态，它将包含currentPage。

我的listitems有简写if语句来检查currentPage是否等于当前item.name。

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

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

进行了检查

我怎样才能做到这一点？

Answer 1

你使用双等于而不是三等于。始终使用三等于。我会先改变这个，因为这可能是问题所在。

同时仔细检查您的新闻事件是否已被触发。

反应原生活动侧边栏菜单项

1 个答案: