React Native 嵌套的 StackNavigator

Question

嵌套 StackNavigator

在我的App.js

里面

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

这用于在登录和主页之间导航并且工作正常

然后在我的 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');

现在，不允许在发送和接收之间导航。我检查了按钮，它使用警报（'msg'）工作正常。我正在渲染发送屏幕而不是接收屏幕。

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

任何人都请帮助:D

Answer 1

您导航到 "Send" 和 "Receive" 的按钮正在使用顶级 StackNavigator 的 navigation 属性。您需要使用 SubNav 的 navigation 属性，您可以使用 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')

}

React Native 嵌套的 StackNavigator

React Native nested StackNavigator

react-native

stack-navigator