react-native - React Native 嵌套 StackNavigator

Question

嵌套 StackNavigator

在我的 App.js 中

const MainNav = StackNavigator({
  Login : { screen : Login },
  MainPage : { screen : MainPage }
  }, {
    navigationOptions : { header : false }
  }
);
....
render() { return ....
<MainNav />

这用于在 Login 和 MainPage 之间导航，并且工作正常

然后在我的 MainPage 里面有另一个 StackNavigator

const SubNav = StackNavigator({
  Send : { screen : Send },
  Receive : { screen : Receive }
  }, {
    navigationOptions : { header : false }
  }
);
....
render() { return ....
<Button />   //click to go to send
<Button />   //click to go to receive
<SubNav />

我在用：

 this.props.navigation.navigate('Send');
 this.props.navigation.navigate('Receive');

现在，不允许在发送和接收之间导航。我已经检查了按钮，并且使用 alert('msg') 可以正常工作。我正在渲染发送屏幕而不是接收屏幕。

我试过 this.props.navigation.navigate('Login'); 我被重定向到登录屏幕。

任何人请帮助：D

Answer 1

您导航到“发送”和“接收”的按钮正在使用navigation顶层 StackNavigator 的道具。您需要使用 的navigation道具SubNav，您可以使用 ref 执行此操作：

class Blah extends Component {

    subNav = null

    render() {
        return ....
            <Button onPress={this.gotoReceive} />
            <Button onPress={this.gotoSend} />
            <SubNav ref={this.refSubNav} />
    }

    refSubNav = el => this.subNav = el

    gotoSend = () => this.subNav.navigation.navigate('send')

}