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

【问题标题】：Highlights the menu item on the viewed component in react-native-side-menu在 react-native-side-menu 中突出显示已查看组件上的菜单项
【发布时间】：2016-09-02 20:05:02
【问题描述】：

我正在使用 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>
    );
  }
}

【问题讨论】：

标签： javascript android ios mobile react-native

【解决方案1】：

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

首先，我们应该跟踪当前选中的Item，然后动态定义backgroundColor，最后在点击item时用选中的item更新当前选中的item。

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

【讨论】：