为什么我的导航仪不工作?

时间:2017-07-12 17:30:14

标签: javascript reactjs react-native react-native-ios react-navigation

我有这个结构,我有一个In [41]: df.groupby('Id', group_keys=False, sort=False) \ .apply(pd.DataFrame.nlargest, n=1, columns='Rank') Out[41]: Id Rank Activity 0 14035 8.0 deployed 1 47728 8.0 deployed 3 24259 6.0 WIP 4 14251 8.0 deployed 6 14250 6.0 WIP 列表:

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> ); } } PopUp Menu

1 个答案:

答案 0 :(得分:1)

您永远不会致电ShowScreenB()

现在你只是绑定它:

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

bind没有调用该函数。所有这一切都将它绑定到给定的上下文。您需要实际调用ShowScreenB(),以便执行导航代码。例如:

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

编辑以回答评论,因为它不符合评论:

这是因为删除( ) =>使得所有内容都是{ }语法剩余。 { }表示评估括号内的内容。看看我的答案中链接中写的内容。 bind的返回值为:

  

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

因此表达式{ this.ShowScreenB.bind(this) }将评估返回值;因此调用导航功能。我上面发布的内容只是您可以做的一个例子。您也可以将其写为onSelect={() => this.ShowScreenB.bind(this)()},它也可以正常工作。如果您遇到此问题,还应该了解arrow functions的工作方式。