Question

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

我想要实现的目标 - 基本上我希望显示appbar和tabbar - 顶部的appbar，正下方的tabbar（TabBarTop），这是一种非常常见的设计模式。

我尝试了几种方法。

方法＃1 （在StackNavigator中嵌套）

Tab.js

export const Tab = TabNavigator({
    Tab1: { screen: Tab1Container },
    Tab2: { screen: Tab2Container }
  }, {
    tabBarComponent: TapBarTop,
    tabBarPosition: 'top'
  });

AppBar.js

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

我在StackNavigator中使用它们，比如

export default StackNavigator({
  stack1: { screen: AppBarComponent },
  stack2: { screen: Tab }
});

这导致在给定时间仅显示1个堆栈，这正是它的工作原理。我不会与initialRouteName有任何关系。

方法＃2 （包装在另一个组件内）

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

相反，它会显示两个组件，但 this.props.navigation.navigate（＆＃39; somepath＆＃39;）或 push（）或 pop（）或 replace（）不在内部工作。但是this.props.navigation及其方法都可以在这些组件中使用。

PS - 我正在使用React Navigation v1并在iOS上运行

Answer 1

方法1的解决方案

只有一个屏幕StackNavigator并在该屏幕中显示您的TabNavigator。然后使用您的自定义AppBarComponent自定义header。

标题

React Element或给定HeaderProps的函数返回一个React   元素，显示为标题。设置为null会隐藏标题。

<强>示例

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

方法2的解决方案

您可以使用withNavigation HOC包装不属于堆栈一部分的组件。

withNavigation是一个更高阶的组件，它通过了导航道具成一个包裹的组件。当你做不到时，这很有用直接将导航道具传递给组件，或者不想要如果是深深嵌套的孩子，请传递它。

<强>示例

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

Answer 2

@bennygenel您的回答对于解决该问题绝对有用。当我谈论在TabNavigator中包含组件时，我有点反馈错误的信息。嗯，不是哑巴组件，而是TabNavigator内部有多个redux容器作为屏幕，整个TabNavigator包裹在一个哑巴组件中。我已经真诚地编辑了问题。

尽管this.props.navigation同时存在于redux容器和包装器组件中，但它们的导航堆栈引用却不同，这就是诸如navigate或goBack()之类的方法不起作用的原因。 / p>

解决方案很简单。将导航堆栈引用作为screenProps传递给包装器组件可以解决此问题。

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

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

2 个答案:

方法1的解决方案

方法2的解决方案