Ios 如何在另一个React组件中正确使用TabNavigator

问题-如何在另一个充当包装器组件的React组件中正确使用反应导航的TabNavigator容器组件

我想要实现的-基本上我希望appbar和tabbar都能显示出来-appbar在顶部，tabbar（TabBarTop）就在其下方，这是一种非常常见的设计模式

我试过几种方法

方法#1（在StackNavigator内嵌套）

Tab.js

AppBar.js

这将导致在给定时间只显示1个堆栈，这正是它的工作方式。我与

initialRouteName

没有任何关系

方法#2（包裹在另一个组件内）

相反，它同时显示这两个组件，但不显示This.props.navigation.navigate（'somepath'）或push（）或pop（）或 replace（）无法从内部和外部工作。但是这个.props.navigation及其方法在这些组件中都是可用的

PS-我正在使用React Navigation v1并在iOS上运行方法1的解决方案 拥有一个只有一个屏幕的

StackNavigator

，并在该屏幕中显示您的

TabNavigator

。然后使用自定义的

AppBarComponent

进行自定义

标题

React元素或函数，给定的

HeaderProps

返回React 元素，以显示为标题。设置为

null

将隐藏标题

样本

export default StackNavigator({
  stack: { 
    screen: Tab,
    navigationOptions: {
      header: (HeaderProps) => (<AppBarComponent headerProps={HeaderProps} />)
    }
  }
});

class AppBarComponent extends Component {
  static navigationOptions = { header: null }
  render() {
    return (
      <View>
        *some more views, buttons blah blah here
      </View>
    )
  }
}
export default withNavigation(AppBarComponent);

---

@bennygenel你的回答对解决这个问题绝对有用。当我谈到在TabNavigator中包含组件时，我提供了一些错误的信息。嗯，TabNavigator中有多个redux容器作为屏幕，而不是哑组件，整个TabNavigator包装在哑组件中。我真诚地编辑了我的问题

尽管redux容器和包装器组件中都存在

this.props.navigation

，但它们的导航堆栈引用不同，这就是为什么

navigate

或

goBack（）

等方法不起作用的原因

解决办法很简单。将导航堆栈引用作为

screenProps

传递给包装器组件可以解决此问题

<View style={{ flex: 1 }}>
  <AppBarComponent />
  <Tab screenProps={{ rootNav: this.props.navigation }} />
</View>

<View style={{ flex: 1 }}>
  <AppBarComponent />
  <Tab />
</View>

export default StackNavigator({
  stack: { 
    screen: Tab,
    navigationOptions: {
      header: (HeaderProps) => (<AppBarComponent headerProps={HeaderProps} />)
    }
  }
});

class AppBarComponent extends Component {
  static navigationOptions = { header: null }
  render() {
    return (
      <View>
        *some more views, buttons blah blah here
      </View>
    )
  }
}
export default withNavigation(AppBarComponent);

<View style={{ flex: 1 }}>
  <AppBarComponent />
  <Tab screenProps={{ rootNav: this.props.navigation }} />
</View>