React Native Native Menu中的項目缺少樣式（應該指示React Native Navigator中的活動路線）

Question

我正在開發一個應用程序，其中包含Side Menu和Navigator。在側面菜單中有一些菜單項讓你瀏覽（使用導航器），菜單項也可以設置樣式以指示哪一個是活動的。

當第一次將與navigator.push()一條新的路徑，然後回去用navigator.pop()，對應以前活動路線的菜單項（也就是現在的無效）沒有得到的風格到要麼顯示它是不活動或活動。菜單項（RouteMenuItem在下面的完整的示例）的風格是如下

style={[ 
    { padding: 15, borderColor: 'firebrick', borderWidth: 1 }, 
    (isActive 
     ? {backgroundColor: 'green'} 
     : {opacity: 0.5} 
    ) 
]} 

怎麼可能既不{backgroundColor: 'green'}也不{opacity: 0.5}得到應用？

下面的圖片顯示了這個bug在Android上的顯示方式：選擇了「Route ONE」，但是「Route TWO」的菜單項沒有opacity: 0.5（應該是像第三個菜單一樣透明項目）。

---

下面是一個小例子，重現bug的完整代碼。在組件層次結構是這樣的：

<Navigator renderScene={() => <SideMenu><View /></SideMenu>} /> 

PS：我們在代碼中使用StyleSheet.create（），但在下面的例子中我剛剛定義的樣式在線。它似乎沒有任何區別。

import React from 'react'; 
import {View, Text, TouchableHighlight, Navigator, Dimensions} from 'react-native'; 
import SideMenu from 'react-native-side-menu'; 

/*************** 
/** Routes **/ 
/****************/ 
const ROUTES = { 
    ONE:() => ({ title: 'Route ONE' }), 
    TWO:() => ({ title: 'Route TWO' }), 
    THREE:() => ({ title: 'Route THREE' }), 
}; 

/**************/ 
/** Main **/ 
/**************/ 
export default class Main extends React.Component { 
    render() { 
     return (
      <Navigator 
       style={{flex: 1}} 
       initialRouteStack={[ 
        ROUTES.ONE(), 
       ]} 
       renderScene={(route, navigator) => 
        <Scene route={route} navigator={navigator} /> 
       } 
      /> 
     ); 
    } 
} 

/***************/ 
/** Scene **/ 
/***************/ 
class Scene extends React.Component { 
    state = { 
     menuIsOpen: false, 
    } 

    openMenu =() => { 
     this.setState({ menuIsOpen: true }); 
    } 

    onMenuOpenChanged = (menuIsOpen) => { 
     if (this.state.menuIsOpen !== menuIsOpen) { 
      this.setState({ menuIsOpen }); 
     } 
    } 

    render() { 
     const {route, navigator} = this.props; 

     return (
      <View style={{flex: 1}}> 
       <SideMenu 
        menu={ 
         <Menu 
          route={route} 
          navigator={navigator} 
         /> 
        } 
        menuPosition="right" 
        bounceBackOnOverdraw={false} 
        onChange={this.onMenuOpenChanged} 
        isOpen={this.state.menuIsOpen} 
        openMenuOffset={Dimensions.get('window').width * 0.75} 
        disableGestures={false} 
       > 
        <Screen route={route} navigator={navigator} openMenu={this.openMenu} menuIsOpen={this.state.menuIsOpen} /> 
       </SideMenu> 
      </View> 
     ); 
    } 
} 

/**************/ 
/** Menu **/ 
/**************/ 
class Menu extends React.Component { 
    render() { 
     const {route, navigator} = this.props; 

     return (
      <View style={{ flex: 1, backgroundColor: 'coral', paddingTop: 25 }}> 
       <Text>Currently at {route.title}</Text> 
       <RouteMenuItem forRoute={ROUTES.ONE()} route={route} navigator={navigator} /> 
       <RouteMenuItem forRoute={ROUTES.TWO()} route={route} navigator={navigator} /> 
       <RouteMenuItem forRoute={ROUTES.THREE()} route={route} navigator={navigator} /> 
      </View> 
     ); 
    } 
} 

const RouteMenuItem = ({forRoute, route, navigator}) => (
    <TouchableHighlight onPress={() => navigator.push(forRoute)}> 
     <Text style={[ { padding: 15, borderColor: 'firebrick', borderWidth: 1 }, (forRoute.title === route.title ? {backgroundColor: 'green'} : {opacity: 0.5}) ]}> 
      Go to {forRoute.title} ({(forRoute.title === route.title ? 'current route' : 'NOT CURRENT ROUTE')}) 
     </Text> 
    </TouchableHighlight> 
); 

/*****************************/ 
/** Screen, inside Menu **/ 
/*****************************/ 
class Screen extends React.Component { 
    render() { 
     const {route, navigator, openMenu, menuIsOpen} = this.props; 

     return (
      <View style={{ flex: 1 }}> 
       <View style={{ flexDirection: 'row', justifyContent: 'space-between', backgroundColor: 'peachpuff', paddingTop: 25 }}> 
        <HeaderButton onPress={navigator.pop}>Back</HeaderButton> 
        <HeaderButton onPress={openMenu}>Menu</HeaderButton> 
       </View> 
       <View style={{ flex: 1, backgroundColor: 'white' }}> 
        <Text style={{ margin: 50, fontSize: 50 }}> 
         {route.title} 
        </Text> 
       </View> 
      </View> 
     ); 
    } 
} 

const HeaderButton = ({onPress, children}) => (
    <TouchableHighlight underlayColor="green" onPress={onPress}> 
     <Text style={{ padding: 10, borderColor: 'firebrick', borderWidth: 1 }}> 
      {children} 
     </Text> 
    </TouchableHighlight> 
); 

Answer 1

由於觸摸TouchableHighlight被按下後TouchableHighlight的孩子獲取默認不透明度（1），因此會出現問題。因爲這是一個更具體的問題，我問了一個新問題here。

在這種情況下，返回到前一個路由時會出現該錯誤，因爲該實例中的菜單項被按下（在我們發現錯誤之前將其移動到新路徑）。