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

Question

我正在使用react-native-side-menu通过引用此answer来查看不同的组件。每个菜单项按下时都会显示相应的组件。 一切工作正常，除了我不知道打开菜单时如何突出显示当前显示组件上的菜单项。

假设我正在将菜单项的背景颜色更改为突出显示，如何根据查看的组件切换样式？

菜单项组件:

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>
    );
  }
}

侧边菜单组件:

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

在 style 属性上使用 [] 允许定义样式数组:所以基本上主要思想是根据状态添加样式。假设选择一个项目时，我应该将其背景颜色设置为红色，否则设置为白色。

因此，首先，我们应该跟踪当前选定的项目，其次动态定义背景颜色，最后在单击项目时用所选项目更新当前选定的项目。

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>
    );
  }
}