反応したネイティブのサイドメニューで表示されたコンポーネントのメニュー項目を強調表示します

Question

反応するネイティブサイドメニューを使用して、これを参照して別のコンポーネントを表示しています。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

は、スタイルの配列を定義することを可能にする：したがって、基本的に主なアイデアは、追加することですスタイルは州によって異なります。たとえば、アイテムが選択されたとき、背景色を赤に、それ以外を白に設定する必要があります。

まず、現在選択されているアイテムを追跡し、2番目に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> 
    ); 
    } 
}