如何在 Actions.SCENE_KEY 中使用变量（反应本机路由器通量）

Question

如果这是我忽略的简单问题，请原谅我。我对编程还很陌生，对 React 和 React Native 更陌生。

我正在构建一个简单的导航抽屉。

抽屉显示具有 renderMenuItem(item) 功能的菜单组件，其中 returns 以下。

<Button onPress={() => this._onItemSelect(item)} style={styles.navItem} >{item}</Button>

它负责将正确标记的按钮返回给呈现函数。

我遇到的问题是当它到达 onItemSelect 函数时，

_onItemSelect(item) {
    //  handle action to render the new page!

    Actions.item      // Won't work
    //Actions.Page2     // Hardcoding the scene here won't work either
    );

我无法在按下按钮时实际显示新场景。如果我将场景硬编码到按钮中的 onPress() 函数中，我可以让它工作。例如：

<Button onPress={Actions.Page2} style={styles.navItem} >{item}</Button>

显然，这是行不通的。我需要的是能够在任一函数中使用 item，renderMenuItem(item) 函数或 onItemSelect(item) 函数。

谢谢。自昨晚以来，我一直在绞尽脑汁想弄清楚这个问题。

Answer 1

问题是 Actions.SCENE_KEY 是一个可以调用的函数，调用时导航器将执行该操作。它在您执行 <Button onPress={Actions.Page2} 时起作用，因为该按钮将函数引用作为 onPress 属性并在适当的时候为您调用它。您只需将代码更改为：

_onItemSelect(item) {
    //  handle action to render the new page!

    Actions.Page2();
);

此外，由于您依赖于 item 的值，您可以将其作为 prop 传递给组件，如下所示：

_onItemSelect(item) {
    //  handle action to render the new page!

    Actions.Page2({item: item});
);

然后，您的下一个屏幕将收到通常的道具以及一个名为 item 的新道具，其中包含您传递的值。

Answer 2

对你来说有点晚了，但可能对其他人有帮助。

使用括号表示法动态调用函数

_onItemSelect(item) {
    Actions[item]();
);

变量 item 应该是您的 routes/scenes.

中的密钥

如何在 Actions.SCENE_KEY 中使用变量（反应本机路由器通量）

How to use a variable in Actions.SCENE_KEY (react native router flux)

react-native

react-native-android

react-native-router-flux