为什么我的导航器不工作？

Question

我有这个结构，其中有一个列表 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 class中准备导航器，然后将其作为函数传递给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。

Answer 1

你从不打电话给ShowScreenB()。

现在你只是绑定它:

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

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

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

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

那是因为删除 ( ) => 后，您只剩下 { } 语法。 { }表示计算括号内的内容。看看我的回答里link里面写的是什么。 bind的return值为：

A copy of the given function with the specified this value and initial arguments.

所以表达式 { this.ShowScreenB.bind(this) } 将计算 return 值；因此调用导航功能。我在上面发布的内容只是您可以执行的操作的一个示例。您也可以将其写成 onSelect={() => this.ShowScreenB.bind(this)()}，它也可以工作。如果您遇到问题，您还应该复习一下 arrow functions 的工作原理。

为什么我的导航器不工作？

Why my navigator is not working?

javascript

reactjs

react-native

react-native-ios

react-navigation