В реакции 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
Как я могу это достичь?
Вы используете double equals вместо тройного равенства. Всегда используйте тройные равные. Я бы изменил это первым, потому что это может быть проблемой.
Также дважды проверьте, что ваше событие пресса активируется.
style={this.state.currentPage == item.name ? styles.activeMenuItemText : styles.menuItemText}
-style={this.state.currentPage == item.name ? styles.activeMenuItemText : styles.menuItemText}
. Какое значение имеютstyles.menuItemText
иstyles.activeMenuItemText
. Это должен быть объект, чтобы он работалimport styles from './styles';
Я добавил свои стили к своему вопросу