0

如果这是我忽略的简单事情，请原谅我。我对编程还很陌生，对 React 和 React Native 来说要新得多。

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

抽屉显示一个菜单组件，该组件具有renderMenuItem(item)返回以下内容的功能。

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

显然，那是行不通的。我需要的是能够在任何一个功能、功能或功能中使用项目。renderMenuItem(item)onItemSelect(item)

谢谢你。自从昨晚试图弄清楚这个问题以来，我一直在破坏我的大脑。

4

2 回答 2

7

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

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

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

变量item应该是您的路线/场景中的关键。

于 2017-05-14T09:16:28.043 回答
2

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

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

    Actions.Page2();
);

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

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

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

然后，您的下一个屏幕将收到通常的道具加上一个新的道具，并item使用您传递的值调用。

于 2016-12-07T21:20:00.333 回答