在 Storybook 中渲染 TabNavigator

Question

我想使用 Storybook.js 模拟一个使用 createMaterialTopTabNavigator() 的页面。但是我无法呈现 material 选项卡，因为该函数的输出实际上并不是一个反应组件。因此，当我直接尝试 <TabNavigator /> 时，它引发了 "navigation" 缺失的不变违规。我发现的唯一解决方法是在 TabNavigator 周围使用 createAppContainer()。但我知道使用多个导航器是不好的做法。 有没有什么方法可以在不需要导航容器的情况下呈现反应导航器元素？

这是我目前的故事书工作代码：

const tabConfiguration = {
  Old: {
    screen: OldProductsScreen,
    navigationOptions: {
      title: "Old"
    }
  },
  New: {
    screen: NewProductsScreen,
    navigationOptions: {
      title: "New"
    }
  }
};
const TabNavigator = createMaterialTopTabNavigator(tabConfiguration);

storiesOf('Test', module)
  .add('Initial', () => {
    const TAB = createAppContainer(TabNavigator);
    return (
      <TAB / >
    );
  })

;

Answer 1

I know that it is bad practice to use more than one navigator. Is there any way to render a react navigator element without needing the navigation container?

在应用中这样做是不好的做法。但是由于您使用的是 Storybook，其中每个容器都像它自己的独立应用程序，所以这完全没问题。

在 Storybook 中渲染 TabNavigator

Rendering a TabNavigator in Storybook

react-native

react-navigation

storybook