StoryBook:如何测试模态视图？

Question

我使用StoryBook来开发React Native移动应用程序的视图。这对于“常规”视图来说是可以的，但是当我显示一个模态视图(使用react-native-modal实现)时，我会被“锁定”，也就是说，用于在正在开发的视图之间切换的StoryBook UI是不可访问的(因为模态视图是“过于模态的”)。

我可以通过在开发中的模态视图中添加一个按钮来关闭它，从而使故事书UI再次可访问，但显然，我只想看到“生产”内容，即没有任何“辅助UI”的模态视图。

是否有任何方法来关闭模态视图使用内置的StoryBook功能或插件，例如旋钮？

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

Answer 1

你的问题还不清楚，比如你什么时候才能用模态来显示某物。但我能理解的是，模式一旦打开就不会关闭。因此，react本机模式提供了一些内置的道具，如：**onBackButtonPress** func () => null Called when the Android back button is pressed **onBackdropPress** func () => null Called when the backdrop is pressed 反应-本机模态文档

所以，在我个人的经验中，我使用的是保持一个状态，它在显示模态时充当国旗。例如在构造函数中，初始化像isVisibleModal:false这样的状态。当您要呈现模式时，将状态更改为isVisibleModal:true。当模式打开时，像onBackdropPress and onBackButtonPress这样的本机模式道具将派上用场，您可以再次将状态更改为isVisibleModal:false，您的模式将被隐藏，您的故事书将被渲染。在呈现函数中，您需要做的就是添加下面的模态代码。

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