javascript - 为什么我的导航器不起作用？

我有这个结构，这里有一个MyComponent列表：

class MyComponent extends Component
{
    props: { navigation: Object, data: Object };

    ShowScreenB(data: Object){
        this.props.navigation.navigate('ScreenB', {data});
    }

    render()
    {
        return (
                <Menu>
                    <MenuTrigger>  <Text> Menu </Text>  </MenuTrigger>
                    <MenuOptions>
                        <MenuOption onSelect={() => this.ShowScreenB.bind(this, this.props.data)}  text='Show Screen B' />
                    </MenuOptions>
                </Menu>
        );
    }
}

class MyScreen extends Component
{
    render()
    {
        let renderRow = (row) => { return (<MyComponent data= {row} navigation= {this.props.navigation} /> );}

        return (
            <View >
                <ListView dataSource={this.state.DataSource} renderRow={renderRow.bind(this)}/>
            </View>
        );
    }
}

但是ShowScreenB()不会转到其他屏幕。

我还尝试在MyScreen类中准备导航器，然后将其作为函数传递给MyComponent。但也行不通：

class MyComponent extends Component
{
    props: { OnPress: Function, data: Object };

    render()
    {
        return (
                <Menu>
                    <MenuTrigger>  <Text> Menu </Text>  </MenuTrigger>
                    <MenuOptions>
                        <MenuOption onSelect={() => this.OnPress.bind(this)}  text='Show Screen B' />
                    </MenuOptions>
                </Menu>
        );
    }
}

class MyScreen extends Component
{
    ShowScreenB(data: Object){
        this.props.navigation.navigate('ScreenB', {data});
    }

    render()
    {
        let renderRow = (row) => { return (<MyComponent data= {row} OnPress= {this.ShowScreenB.bind(this, row)} /> );}

        return (
            <View >
                <ListView dataSource={this.state.DataSource} renderRow={renderRow.bind(this)}/>
            </View>
        );
    }
}

可能是什么问题？

编辑：Menu是PopUp Menu。

最佳答案

您永远不会呼叫ShowScreenB()。

现在，您正在绑定它：

onSelect={() => this.ShowScreenB.bind(this, this.props.data)}

bind不调用该函数。它所做的全部将其绑定到给定的上下文。您需要实际调用ShowScreenB()，以便执行导航代码。例如：

onSelect={() => { this.ShowScreenB.bind(this); this.ShowScreenB(this.props.data); }}

编辑以回答评论，因为它不适合评论：

那是因为删除( ) =>使它成为可能，所以剩下的就是{ }语法。 { }表示评估括号内的内容。看看我的答案链接中写的是什么。 bind的返回值为：


  具有指定的this值和初始参数的给定函数的副本。


因此，表达式{ this.ShowScreenB.bind(this) }将计算返回值；因此调用导航功能。我上面发布的内容只是您可以做什么的一个示例。您可以像onSelect={() => this.ShowScreenB.bind(this)()}一样编写它，它也可以正常工作。如果您对此有疑问，还应该重新研究arrow functions的工作方式。