React-Native全局对话框

Question

我想创建一个可以在任何屏幕上打开的对话框。 我尝试搜索，但似乎找不到正确的架构方法。

在我当前的体系结构中，我所有的屏幕都传递给BaseScreen HOC。 它添加了所有屏幕上提供的我的自定义窗口小部件。 但是，当我将对话框放到那里时，找不到从特定屏幕调用它的方法。

基本画面：

function BaseScreen(WrappedComponent) {
   return class BaseScreen extends WrappedComponent {
      render() {
         return (
          //add custom widgets here
          {super.render()} //to insert the specific layout for the current screen/wrapped component
         );
      }
   }
}

自定义屏幕：

function CustomScreen extends React.Component {
    //more codes here
}

export default BaseScreen(CustomScreen);

如何在BaseScreen上插入全局对话框并从CustomScreen调用它？ （加载对话框，错误对话框等）

Answer 1

是的 在BaseScreen让添加对话框状态。 然后添加方法showDialog来控制显示和隐藏对话框。

const BaseScreen = WrappedComponent => class extends React.Component{
      state = {
         showDialog: true,
      }

      showDialog = (bool= true) => {
         this.setState({showDialog: bool});
      }

      render() {
         return (
            <View>
               //Code for dialog here
               <WrappedComponent showDialog={this.showDialog}/>
            </View>
         );
      }
   }

在CustomScreen您可以通过props中的showDialog函数显示和隐藏对话框。