React Native Side Menu 中的项目缺少样式（应在 React Native Navigator 中指示活动路线）

Question

我正在开发一个带有Side Menu 和Navigator 的应用程序。在侧边菜单中，有一些菜单项可以让您导航（使用 Navigator），并且菜单项也会设置样式以指示哪个是活动的。

当先用navigator.push() 去一个新的路由，然后用navigator.pop() 返回时，对应于previously 激活的路由（现在是非激活的）的菜单项不会得到styles 中的任何一个 以表明它是 inactive 或 active。菜单项的样式（下面完整示例中为RouteMenuItem）如下

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

怎么可能{backgroundColor: 'green'} 和{opacity: 0.5} 都没有被应用？

下图显示了该错误在 Android 上的外观：选择了“Route ONE”，但是，“Route TWO”的菜单项没有应有的opacity: 0.5（它应该像第三个菜单一样半透明项目）。

---

以下是重现该错误的最小示例的完整代码。组件层次结构是这样的：

<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。

在这种情况下，当返回到上一个路径时会出现错误，因为按下了 Menu 实例中的菜单项（在我们发现错误之前将我们移动到新路径）。