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

sidemenu组件：

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

在样式道具上使用[]允许定义样式数组：所以基本上主要的想法是根据状态添加样式。让我们说当选择一个项目时，我应该将它的背景颜色设置为红色，否则为白色。

首先，我们应该跟踪当前所选的项目，第二个动态定义backgroundColor，最后在点击项目时使用所选项目更新当前所选项目。

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

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

1 个答案: