react-native-popup-menu - 在菜单打开时在 MenuOption 中动态设置文本子项

Question

我需要在打开菜单时对 MenuOption 进行条件渲染。

似乎 MenuOptions 中的 MenuOption 是在我的测试打开菜单之前呈现的。

基于时间戳差异，我需要更改图标和样式。

我注意到菜单打开时会触发，我编写了一个函数来更新全局变量，但是全局变量似乎是在构建菜单时设置的，而不是在打开选项时设置的。

我正在尝试的简化版本。注意style每个<Text>元素中的条件canSplit

let canSplit = false;

const canSplitEntry = () => {
    canSplit =  true;  
};

return (
    <Menu onOpen={() => canSplitEntry()}>
        <MenuTrigger style={styles.menuTrigger}>
            <Icon
                name="more-vert"
                color={theme.text.color}
                size={20}
            />
        </MenuTrigger>
        <MenuOptions style={theme.popupMenu}>
            <MenuOption
                style={styles.menuOption}
                onSelect={() => canSplit ? setModal('splitEntry', logTimestamp) : {}}
            >
                <SplitIcon color={theme.text.color} size={15} />
                <Text style={[theme.text, (canSplit ? theme.opacityStrong : theme.opacityMid), { paddingLeft: 10 }]}>
                    Split
                </Text>
            </MenuOption>

            <MenuOption
                style={styles.menuOption}
                onSelect={() => canMerge ? setModal('mergeEntry', logTimestamp) : {}}
            >
                <MergeIcon color={theme.text.color} size={15} />
                <Text style={[theme.text, !canMerge && theme.opacityStrong, { paddingLeft: 10 }]}>
                    Merge
                </Text>
            </MenuOption>
        </MenuOptions>
    </Menu>
)

我希望当 onOpen 被触发时，全局变量会被更新，并且 MenuOption 会响应更改而不是预渲染并且永远不会再更改

标签： react-native-popup-menu