React Native：可從每個應用程序屏幕訪問的自定義組件

Question

什么是創建可從任何屏幕訪問的自定義組件的最佳“反應”方式？

想想自定義警報component 。 我需要在我的應用程序的每個屏幕中，所以當出現錯誤時我可以顯示它。

目前我這樣做：

// 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;

//Foo.js

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;

//FooContainer.js

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;

你可以看到它是一種痛苦（我認為這是一種不正確的方式）。 這樣做我需要在我的應用程序的每個component中包含AlertModal組件，我需要在其中顯示警告=重復道具並創建新的不必要的<AlertModal />組件。

什么是正確的方法？

ps我在我的應用程序中使用react-native-router-flux作為路由器。 pss我來自Meteor.js + Cordova React-native 。 在那里，我可以創建一個模態並將其包含在主layout並在必要時顯示/隱藏它，並在其中包含相應的動態文本。

這就是我在我的應用中導航的方式：

//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>
          </Router>
        );
      }
}

Answer 1

基於您使用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>
    );
  }
}

然后你可以從任何場景調用它：

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

不確定是否有所需的行為，但這種模式可能會在Android中用后退按鈕解除。 如果沒有，那就有辦法解決它。

Answer 2

這可能不是最好的解決方案，但您可以使用React的上下文功能。 本質上，傳遞一個函數引用，觸發您的組件顯示/隱藏（例如，通過將其state更改為）到上下文中。 然后，層次結構中的每個子節點都應該能夠調用該函數。

但是，Facebook不鼓勵使用上下文功能，並且在調試時可能會給您一些問題，因為它不像您的道具/狀態那樣容易跟蹤。

想到的另一個解決方案可能是使用Redux，創建一個操作來更改組件訂閱的屬性。 然后，所有其他組件都可以dispatch該操作，更改使模式組件顯示的屬性的值。