在react-native-side-menu中突出显示已查看组件上的菜单项

Question

I am using react-native-side-menu to view different component by refering to this answer . Each of the menu item when pressed will displaying the corresponding component. Everything working fine except I don't know how to highlight the menu item on the current display component when the menu is opened.

Let say I am changing the background color of the menu item as highlighted, how can toggle the style based on the viewed component?

The menu items component:

module.exports = class Menu extends Component {
    static propTypes = {
        onItemSelected: React.PropTypes.func.isRequired,
    };

    render() {
    return (
      <ScrollView  style={styles.menu}>
       //the route is the menu items with component
       {
        routes.map((com) => {
            return(
            <Text key={com.id}
              onPress={() => this.props.onItemSelected(com)}
              style={styles.item}>
              {com.name}
            </Text>
            )
        })
      }
      </ScrollView>
    );
  }
}

The sidemenu component:

module.exports = class Main extends Component {
  constructor(props) {
    super(props);
    this.state = {
        isOpen: false,
        selectedItem: routes[0],
      };
  }

  toggle() {
    this.setState({
      isOpen: !this.state.isOpen,
    });
  }

  updateMenuState(isOpen) {
    this.setState({ isOpen, });
  }

  onMenuItemSelected = (item) => {
    this.setState({
      isOpen: false,
      selectedItem: item,
    });
  }

  render() {
    const menu = <Menu onItemSelected={this.onMenuItemSelected} />;
    let Component = this.state.selectedItem.compo  ;
    return (
      <SideMenu
        menu={menu}
        isOpen={this.state.isOpen}
        onChange={(isOpen) => this.updateMenuState(isOpen)}
        openMenuOffset={SCREEN_WIDTH * 0.4}
        >

        {Component}

        <Button style={styles.button} onPress={() => this.toggle()}>
          <Image
            source={require('./assets/menu.png')} style={{width: 35, height: 35}} />
        </Button>
      </SideMenu>
    );
  }
}

Answer 1

using [] on style prop allow to define an array of styles : so basically the main idea is to add a style depending on state. let's say when an item is selected i should set it's background color to red else to white.

So first, we should track the current selected Item, second define the backgroundColor dynamically and finally when clicking on item update the current selected item with the selected one.

module.exports = class Menu extends Component {
  constructor( props ) {
    super( props );
    this.state = {
      //Add a state to track what current selected Item
      selectedItem: routes[ 0 ].id
    };
  }

  static propTypes = {
    onItemSelected: React.PropTypes.func.isRequired,
  };

  render() {
    return (
    <ScrollView style={ styles.menu }>
      //the route is the menu items with component
      { routes.map( (com) => {
          return ( < Text
                          key={ com.id }
                          onPress={ () => {
                                      this.props.onItemSelected( com )
                                      //Change the current selected Item
                                      this.setState( {
                                        selectedItem: com.id
                                      } )
                                    } }
                          style={ [ styles.item, 
                                    { 
                                      backgroundColor: this.state.selectedItem == com.id ? 
                                      'red' : 'white' 
                                    } 
                                  ] }>
                     { com.name }
                     </Text>
          )
        } ) }
    </ScrollView>
    );
  }
}