Question

我想创建一个可以在任何屏幕上打开的对话框。我试图搜索，我似乎无法找到如何正确地构建它。

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

BaseScreen：

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中，您可以显示和隐藏来自道具的showDialog func对话框。

React-Native全局对话

1 个答案: