Javascript React Native：可从每个应用程序屏幕访问的自定义组件

创建可从任何屏幕访问的自定义组件的最佳“反应”方式是什么

设想一个自定义警报

组件

。我需要在我的应用程序的每个屏幕上显示它，所以当出现错误时，我可以显示它

目前我是这样做的：

//AlertModal.js

import ... from ...;

const AlertModal = (props) => {

  const {isSuccess, headerText, bodyText, onClosed, isOpen, onBtnPress} = props;

  return (

      <Modal
        ...
        isOpen={isOpen}
        onClosed={() => onClosed()}
      >

        <View ...>

            <Text>{headerText}</Text>

          <Text>{bodyText}</Text>

          <Button
            ...
            onPress={() => onBtnPress()}
           >
              ...
           </Button>

        </View>

      </Modal>

  )
};

export default AlertModal;

import ...from ...;

const Foo = (props) => {

  const { alertIsSuccess, alertHeaderText, alertBodyText, alertIsOpen, alertOnClosed, alertOnBtnPress, onBtnPress, ...rest } = props;

  return (
    <View style={}>

     ...     

      <View style={}>
        ...
      </View>


        <Button
          onPress={() => onBtnPress()}
        />

      <AlertModal
        isSuccess={alertIsSuccess}
        headerText={alertHeaderText}
        bodyText={alertBodyText}
        isOpen={alertIsOpen}
        onClosed={alertOnClosed}
        onBtnPress={alertOnBtnPress}
      />

    </View>
  )

};

export default QrCodeReader;

import ... from ...;

class FooContainer extends Component {
    constructor(props) {
        super(props);

        this.state = {
          bar: false,
          baz: true,
          bac: '',
          bax: false,
          bav: '',

          // Alert
          alertIsOpen: false,
          alertIsSuccess: false,
          alertHeaderText: '',
          alertBodyText: '',
          alertOnClosed() {},
          alertOnBtnPress() {},
        };

      this.onBtnPress = this.onBtnPress.bind(this);
    }

    alert(isSuccess, headerText, bodyText, onBtnPress, onClosed) {

      const self = this;

      this.setState({
        alertIsOpen: true,
        alertIsSuccess: isSuccess,
        alertHeaderText: headerText,
        alertBodyText: bodyText,
        alertOnBtnPress: onBtnPress || function () { self.alertClose() },
        alertOnClosed: onClosed || function () {},
      });

    }

    alertClose() {

      this.setState({
        alertIsOpen: false,
      });

    }

    onBtnPress() {

        this.alert(
          true,
          'header text',
          'body text',
        )

    }

    render() {
        return (
          <Foo
            onBtnPress={this.onBtnPress}
            {...this.state}
          />
        );
    }
}

export default FooContainer;

---

这可能不是最好的解决方案，但您可以使用React的功能。本质上，传递一个函数引用，该函数引用触发组件在上下文中显示/隐藏（例如，可以通过更改其

状态来实现）。然后层次结构中的每个子级都应该能够调用该函数

然而，Facebook不鼓励使用上下文功能，并且在调试时可能会给您带来一些问题，因为它不像您的道具/状态那样容易跟踪

想到的另一个解决方案可能是使用Redux，创建一个操作来更改组件订阅的属性。然后，所有其他组件都可以
分派该操作，更改使模态组件显示的属性值。
基于您使用
react native router flux的事实，我可以建议：

自己将AlertModal重新加工到场景组件中，不要使用Modal。您可以通过传递属性来控制要在其中显示的内容。
将AlertModal组件作为“模式”模式包含在路由器中，如下所示：

import AlertModal from '../components/AlertModal';
//Main.js
class Main extends Component {
  render() {
    return (
      <Router backAndroidHandler={() => true}>
        <Scene key="root">
          <Scene key="login" type='reset' component={SignInContainer} initial={true} hideNavBar={true}/>
          <Scene key="qrCode" type='reset' component={FooContainer} hideNavBar={true} />
          <Scene key="alertModal" duration={250} component={AlertModal} schema="modal" direction="vertical" hideNavBar={true} />
        </Scene>
      </Router>
    );
  }
}

从“../components/AlertModal”导入AlertModal；
//Main.js
类主扩展组件{
render（）{
返回(
对}>
);
}
}

然后你可以在任何场景中调用它：

Actions.alertModal({ >optional props you want to pass< });

Actions.alertModal（{>要传递的可选道具<}）；

不确定这是否是想要的行为，但这种情态动词在安卓系统中可能会被取消。如果没有，就有办法解决。
如何在屏幕之间导航？您应该能够在根屏幕中加载组件，并将引用传递给加载组件的其他屏幕modal@FuzzyTree您好，我已更新我的答案以显示我的导航。您能告诉我更多关于“您应该能够在根屏幕中加载组件，并将引用传递给加载模式的其他屏幕”的信息吗
Actions.alertModal({ >optional props you want to pass< });