Question

我想使用Storybook.js来模拟使用createMaterialTopTabNavigator（）的页面。但是我无法渲染材质Tab，因为该函数的输出实际上不是React组件。因此，当我直接尝试<TabNavigator />时，就发生了一个不变的冲突，即“导航”丢失了。我发现的唯一解决方法是在TabNavigator周围使用createAppContainer（）。但是我知道，使用多个导航器是不好的做法。 有没有不需要导航容器即可呈现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导航器元素？

在应用程序中执行此操作是不好的做法。但是，由于您使用的是Storybook，因此每个容器都像其自己的独立应用一样位于其中，因此完全可以。

在故事书中渲染TabNavigator

1 个答案: