在故事簿中呈现TabNavigator

Question

我想使用Storybook.js来模拟一个利用createMaterialTopTabNavigator()的页面。但是，由于函数的输出实际上不是一个react组件，所以我不能呈现material。因此，当我直接尝试<TabNavigator />时，它抛出了“导航”缺失这一不变的违规行为。我发现的唯一解决办法是在createAppContainer()周围使用TabNavigator。但我知道使用多个导航仪是错误的做法。是否有任何方法可以在不需要导航容器的情况下呈现一个react导航器元素？

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

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

我知道使用多个导航器是错误的做法。是否有任何方法可以在不需要导航容器的情况下呈现react导航器元素？

在应用程序中这样做是不好的做法。但是由于您使用的是童话簿，每个容器都在其中，就像自己的独立应用程序一样，这是完全正确的。