StoryBook：如何测试模态视图？

Question

我使用StoryBook来开发React Native移动应用程序的视图。这对于“常规”视图来说工作正常，但是当我显示模态视图（使用 实现react-native-modal）时，我会“锁定”，即用于在开发中的视图之间切换的 StoryBook UI 无法访问（因为模态视图“太”）模态”）。

我可以通过在开发中的模态视图中添加一个按钮来关闭它，以便再次访问故事书用户界面来解决这个问题，但显然，我只想看到“生产”内容，即没有的模态视图任何“帮助用户界面”。

有没有什么方法可以使用内置的 StoryBook 功能或插件（例如Knobs ）关闭模态视图？

我通常会如何在 StoryBook 中开发/显示模式视图？

Answer 1

您的问题不清楚，例如您何时确切使用模态来显示某些内容。但我能理解的是，模式一旦打开就不会关闭。所以react-native-modal提供了一些内置的道具，例如： **onBackButtonPress** func () => null Called when the Android back button is pressed **onBackdropPress** func () => null Called when the backdrop is pressed react-native-modal文档

因此，根据我的个人经验，我使用的是维护一个状态，该状态充当何时显示模式的标志。例如，在构造函数中初始化一个类似的状态isVisibleModal:false。当您想要渲染模态时，将状态更改为isVisibleModal:true。当模式打开时，react-native-modal 道具onBackdropPress and onBackButtonPress会派上用场，您可以再次将状态更改为isVisibleModal:false，您的模式将隐藏，您的故事书将被渲染。在渲染函数中，您需要做的就是添加以下模态代码

render(){ return( {this.state.isVisibleModal?<ModalComponent/>:<View></View>} ) }